JQuery UI drag'n'drop
Добрый день.
Столкнулся с проблемой при работе с jquery ui droppable.
Есть два контейнера содержащие элементы. Элементы можно перетаскивать из одного контейнера в другой.
выглядит это так:
Проблемы начинаются тогда, когда контейнеры пересекают друг друга. Вот так:
А именно, как видно из рисунка, у контейнеров есть область пересечения. И если начать перемещать элементы внутри контейнера два и при этом оставаться в области пересечения двух контейнеров, то элементы перемещаются в первый контейнер.
Так вот тут и возникает вопрос, как избавиться от этого эффекта?
Вот код, контейнеры можно перемещать для наглядности.
[HTML]<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/1.8rc1/jquery-1.4.1.js"></script>
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/1.8rc1/ui/jquery-ui.js"></script>
<style type="text/css">
#container1, #container2 {
position: relative;
width: 240px;
height: 440px;
top: 10px;
border: 1px solid black;
}
li {
border: 1px solid black;
height: 30px;
width: 70px;
margin: 1px;
}
ul {
list-style:none;
}
#container1 {
left: 10px;
background-color: green;
}
#container2 {
left: 10px;
background-color: gold;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
var $c1 = $('#container1'), $c2 = $('#container2');
$c1.draggable();
$c2.draggable();
$('li').draggable({
revert: 'invalid',
//helper: 'clone',
cursor: 'move',
});
$c1.droppable({
accept: '#container2 li',
drop: function(ev, ui) {
dropItem(ui.draggable, $c1);
}
});
$c2.droppable({
accept: '#container1 li',
drop: function(ev, ui) {
dropItem(ui.draggable, $c2);
}
});
function dropItem($item, $container) {
$item.css('top','0px').css('left','0px');
var $list = $container.find('ul');
$list.length ? $list.append($item) : $('<ul />').appendTo($container).append($item);
}
});
</script>
</head>
<body>
<div id="container1">
container1
<ul>
<li>Box 1_1</li>
<li>Box 1_2</li>
<li>Box 1_3</li>
<li>Box 1_4</li>
</ul>
</div>
<div id="container2">
container2
<ul>
<li>Box 2_1</li>
<li>Box 2_2</li>
<li>Box 2_3</li>
<li>Box 2_4</li>
</ul>
</div>
</body>
</html>[/HTML]
Столкнулся с проблемой при работе с jquery ui droppable.
Есть два контейнера содержащие элементы. Элементы можно перетаскивать из одного контейнера в другой.
выглядит это так:
Проблемы начинаются тогда, когда контейнеры пересекают друг друга. Вот так:
А именно, как видно из рисунка, у контейнеров есть область пересечения. И если начать перемещать элементы внутри контейнера два и при этом оставаться в области пересечения двух контейнеров, то элементы перемещаются в первый контейнер.
Так вот тут и возникает вопрос, как избавиться от этого эффекта?
Вот код, контейнеры можно перемещать для наглядности.
[HTML]<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/1.8rc1/jquery-1.4.1.js"></script>
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/1.8rc1/ui/jquery-ui.js"></script>
<style type="text/css">
#container1, #container2 {
position: relative;
width: 240px;
height: 440px;
top: 10px;
border: 1px solid black;
}
li {
border: 1px solid black;
height: 30px;
width: 70px;
margin: 1px;
}
ul {
list-style:none;
}
#container1 {
left: 10px;
background-color: green;
}
#container2 {
left: 10px;
background-color: gold;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
var $c1 = $('#container1'), $c2 = $('#container2');
$c1.draggable();
$c2.draggable();
$('li').draggable({
revert: 'invalid',
//helper: 'clone',
cursor: 'move',
});
$c1.droppable({
accept: '#container2 li',
drop: function(ev, ui) {
dropItem(ui.draggable, $c1);
}
});
$c2.droppable({
accept: '#container1 li',
drop: function(ev, ui) {
dropItem(ui.draggable, $c2);
}
});
function dropItem($item, $container) {
$item.css('top','0px').css('left','0px');
var $list = $container.find('ul');
$list.length ? $list.append($item) : $('<ul />').appendTo($container).append($item);
}
});
</script>
</head>
<body>
<div id="container1">
container1
<ul>
<li>Box 1_1</li>
<li>Box 1_2</li>
<li>Box 1_3</li>
<li>Box 1_4</li>
</ul>
</div>
<div id="container2">
container2
<ul>
<li>Box 2_1</li>
<li>Box 2_2</li>
<li>Box 2_3</li>
<li>Box 2_4</li>
</ul>
</div>
</body>
</html>[/HTML]