将可排序项放入可排序项(嵌套 div)
Drop a sortable into a sortable (nested divs)
我创建了一个代码,允许我将 div 从第 1 列拖到第 2 列。第 2 列是可排序的。
这很好用,但我现在想将 div 从第 1 列拖到 div 中,该 div 已被放入第 2 列。
到目前为止,这是我的代码:
HTML
<div id="column1">
<p>Items</p>
<div class="dragItem">Drag me ONE</div>
<div class="dragItem">Drag me TWO</div>
<div class="dragItem">Drag me THREE</div>
</div>
<div id="column2" class="droppable">
<p>Drop here</p>
</div>
jQuery:
$('.dragItem').draggable({
helper: 'clone',
connectToSortable: "#column2"
});
$('.dragItem').sortable({
containment: "parent"
});
$('#column2').sortable({
cancel: '#cont>div',
placeholder: "highlight"
});
$('#column2').droppable({
accept: '.dragItem',
drop: function(event, ui) {
var draggable = ui.draggable;
var droppable = $(this);
var drag = $('#column2').has(ui.draggable).length ? draggable : draggable.clone().draggable({});
drag.appendTo(column2);
}
});
谢谢
一旦项目被删除 - 您需要将 sortable
和 droppable
应用到那个 div。
这是一个例子:
$('.dragItem').draggable({
helper: 'clone',
connectToSortable: "#column2,#column2 div"
});
$('.dragItem').sortable({
containment: "parent"
});
$('#column2').sortable({
placeholder: "highlight"
});
$('#column2').droppable({
accept: '.dragItem',
drop: function(event, ui) {
var draggable = ui.draggable;
var droppable = $(this);
var drag = $('#column2').has(ui.draggable).length ? draggable : draggable.clone().draggable({});
drag.appendTo(column2);
drag.sortable({
placeholder: "highlight"
});
drag.droppable({
accept: ".dragItem",
drop: function (event, ui) {
var draggable = ui.draggable;
var droppable = $(this);
var drag = $('#column2').has(ui.draggable).length ? draggable : draggable.clone().draggable({});
}
})
drag.css({width:'', height: ''})
}
});
#column1, #column2 {
width: 250px;
margin-right: 10px;
border: 1px solid red;
float: left
}
.droppable div {
border: 1px solid blue;
margin: 5px;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css" />
<div id="column1">
<p>Items</p>
<div class="dragItem">Drag me ONE</div>
<div class="dragItem">Drag me TWO</div>
<div class="dragItem">Drag me THREE</div>
</div>
<div id="column2" class="droppable">
<p>Drop here</p>
</div>
我创建了一个代码,允许我将 div 从第 1 列拖到第 2 列。第 2 列是可排序的。
这很好用,但我现在想将 div 从第 1 列拖到 div 中,该 div 已被放入第 2 列。
到目前为止,这是我的代码:
HTML
<div id="column1">
<p>Items</p>
<div class="dragItem">Drag me ONE</div>
<div class="dragItem">Drag me TWO</div>
<div class="dragItem">Drag me THREE</div>
</div>
<div id="column2" class="droppable">
<p>Drop here</p>
</div>
jQuery:
$('.dragItem').draggable({
helper: 'clone',
connectToSortable: "#column2"
});
$('.dragItem').sortable({
containment: "parent"
});
$('#column2').sortable({
cancel: '#cont>div',
placeholder: "highlight"
});
$('#column2').droppable({
accept: '.dragItem',
drop: function(event, ui) {
var draggable = ui.draggable;
var droppable = $(this);
var drag = $('#column2').has(ui.draggable).length ? draggable : draggable.clone().draggable({});
drag.appendTo(column2);
}
});
谢谢
一旦项目被删除 - 您需要将 sortable
和 droppable
应用到那个 div。
这是一个例子:
$('.dragItem').draggable({
helper: 'clone',
connectToSortable: "#column2,#column2 div"
});
$('.dragItem').sortable({
containment: "parent"
});
$('#column2').sortable({
placeholder: "highlight"
});
$('#column2').droppable({
accept: '.dragItem',
drop: function(event, ui) {
var draggable = ui.draggable;
var droppable = $(this);
var drag = $('#column2').has(ui.draggable).length ? draggable : draggable.clone().draggable({});
drag.appendTo(column2);
drag.sortable({
placeholder: "highlight"
});
drag.droppable({
accept: ".dragItem",
drop: function (event, ui) {
var draggable = ui.draggable;
var droppable = $(this);
var drag = $('#column2').has(ui.draggable).length ? draggable : draggable.clone().draggable({});
}
})
drag.css({width:'', height: ''})
}
});
#column1, #column2 {
width: 250px;
margin-right: 10px;
border: 1px solid red;
float: left
}
.droppable div {
border: 1px solid blue;
margin: 5px;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css" />
<div id="column1">
<p>Items</p>
<div class="dragItem">Drag me ONE</div>
<div class="dragItem">Drag me TWO</div>
<div class="dragItem">Drag me THREE</div>
</div>
<div id="column2" class="droppable">
<p>Drop here</p>
</div>