我使用jquery ui进行简单的拖放操作。我想克隆元素并将克隆放在光标位置。
$(function() {
$( "#draggable" ).draggable({
grid: [ 20, 20 ],
//helper: 'clone',
});
$("#dropzone-panel").droppable({
drop: function(event, ui) {
console.log("Drop Event Fired");
}
});
});
我可以拖动元素,当我放下它时,它会保持在正确的位置。
但是我不想移动原始版本,我想克隆它,然后将克隆放到位。
我尝试调用clone并在drop函数中添加appendTo,但这只是将它附加到#dropzone-panel的末尾,而不是将其保留到位。
知道我需要做什么,克隆并放下光标位置?
答案 0 :(得分:2)
我会使用帮助程序选项设置draggable
,然后使用accept
选项设置droppable。这可能看起来像:
$(function() {
$(".draggable").draggable({
helper: 'clone',
grid: [ 20, 20 ],
appendTo: ".droppable"
});
$(".droppable").droppable({
accept: ".draggable",
drop: function(e, ui) {
var pos = ui.position;
var $obj = ui.helper.clone();
$obj.css({
position: 'absolute',
top: pos.top + "px",
left: pos.left + "px"
});
$obj.appendTo(".droppable");
}
});
});
您需要使用CSS将Droppable包装在具有position: relative;
的Div中,以确保保留附加元素的绝对定位。