重置位置拖放
Reset positions drag and drop
有人能帮我吗,如何将拖动的项目重置为默认位置(与页面加载后相同)??
例如在单击按钮后..
jsfiddle有一个link:https://jsfiddle.net/dj8q2qmb/1/
$(document).ready(function() {
$(".card").draggable({
appendTo: "body",
cursor: "move",
helper: 'clone',
revert: "invalid",
});
$(".launchPad").droppable({
tolerance: "intersect",
accept: ".card",
drop: function(event, ui) {
$(this).append($(ui.draggable));
}
});
$(".stackDrop").droppable({
tolerance: "intersect",
accept: ".card",
drop: function(event, ui) {
$(this).append($(ui.draggable));
}
});
});
您需要 clone()
在进行更改之前列出
并在点击重置按钮时重新收听拖动
测试 https://jsfiddle.net/dj8q2qmb/3/
$(document).ready(function() {
//clone list
var launchPad = $(".launchPad").clone();
//reset button
$("[name='reset']").click(function(){
//empty bottom div
$("#dropZone .stackDrop").empty();
//get cloned content
$(".launchPad").html(launchPad.html());
//re-listen to dragging
listenToDragable();
});
//listen to dragging
listenToDragable();
function listenToDragable(){
$(".card").draggable({
appendTo: "body",
cursor: "move",
helper: 'clone',
revert: "invalid",
});
$(".launchPad").droppable({
tolerance: "intersect",
accept: ".card",
drop: function(event, ui) {
$(this).append($(ui.draggable));
}
});
$(".stackDrop").droppable({
tolerance: "intersect",
accept: ".card",
drop: function(event, ui) {
$(this).append($(ui.draggable));
}
});
}
});
有人能帮我吗,如何将拖动的项目重置为默认位置(与页面加载后相同)??
例如在单击按钮后..
jsfiddle有一个link:https://jsfiddle.net/dj8q2qmb/1/
$(document).ready(function() {
$(".card").draggable({
appendTo: "body",
cursor: "move",
helper: 'clone',
revert: "invalid",
});
$(".launchPad").droppable({
tolerance: "intersect",
accept: ".card",
drop: function(event, ui) {
$(this).append($(ui.draggable));
}
});
$(".stackDrop").droppable({
tolerance: "intersect",
accept: ".card",
drop: function(event, ui) {
$(this).append($(ui.draggable));
}
});
});
您需要 clone()
在进行更改之前列出
并在点击重置按钮时重新收听拖动
测试 https://jsfiddle.net/dj8q2qmb/3/
$(document).ready(function() {
//clone list
var launchPad = $(".launchPad").clone();
//reset button
$("[name='reset']").click(function(){
//empty bottom div
$("#dropZone .stackDrop").empty();
//get cloned content
$(".launchPad").html(launchPad.html());
//re-listen to dragging
listenToDragable();
});
//listen to dragging
listenToDragable();
function listenToDragable(){
$(".card").draggable({
appendTo: "body",
cursor: "move",
helper: 'clone',
revert: "invalid",
});
$(".launchPad").droppable({
tolerance: "intersect",
accept: ".card",
drop: function(event, ui) {
$(this).append($(ui.draggable));
}
});
$(".stackDrop").droppable({
tolerance: "intersect",
accept: ".card",
drop: function(event, ui) {
$(this).append($(ui.draggable));
}
});
}
});