[英]jquery drag n drop, not allow drop on clone drop container
try to drag item and drop to clone div, but it's not working. 尝试将项目拖放到克隆div,但是它不起作用。 it's seem like jquery drag n drop not allow to drop on clone item.
似乎jquery drag n drop不允许放置在克隆项目上。
drag n drop working on first one, after i click add more dropzone, and try to drop item to new dropzone. 在我单击添加更多dropzone之后,将n拖放到第一个上,然后尝试将项目拖放到新的dropzone。 it's not allow to.
这是不允许的。
here is my jsfiddle 这是我的jsfiddle
$(document).on("click", ".add_dropzone", function(e){
$('<div class=\"dropzone\"></div>').insertAfter($('.dropzone').last());});
$( "ul li" ).each(function(){
$(this).draggable({
helper: "clone"
});
});
$( ".dropzone" ).droppable({
activeClass: "active",
hoverClass: "ui-state-active",
tolerance: "touch",
accept: ":not(.ui-sortable-helper)",
drop: function( event, ui ) {
var targetElem = $(this).attr("id");
$( this ).addClass( "ui-state-highlight" );
if($(ui.draggable).hasClass('draggable-source'))
$( ui.draggable ).clone().appendTo( this ).removeClass('draggable-source');
else
$( ui.draggable ).appendTo( this );
$('.delete').on('click', function () {
$(this).parent().parent().parent().parent('li').remove();
});
//alert($(this).text());
}
}).sortable({
items: "li:not(.placeholder)",
sort: function() {
$( this ).removeClass( "ui-state-default" );
}
});
Any help will be greatly appreciated! 任何帮助将不胜感激!
I have moved the initializing code to a function 我已将初始化代码移至函数
Final code will look like 最终代码看起来像
$(document).on("click", ".add_dropzone", function (e) {
$('<div class=\"dropzone\"></div>').insertAfter($('.dropzone').last());
initDroppable();
});
$("ul li").each(function () {
$(this).draggable({
helper: "clone"
});
});
initDroppable();
function initDroppable() {
if (typeof window.dropElem != "undefined") window.dropElem.droppable('destroy');
window.dropElem = $(".dropzone").droppable({
activeClass: "active",
hoverClass: "ui-state-active",
tolerance: "touch",
accept: ":not(.ui-sortable-helper)",
drop: function (event, ui) {
var targetElem = $(this).attr("id");
$(this).addClass("ui-state-highlight");
if ($(ui.draggable).hasClass('draggable-source')) $(ui.draggable).clone().appendTo(this).removeClass('draggable-source');
else $(ui.draggable).appendTo(this);
$('.delete').on('click', function () {
$(this).parent().parent().parent().parent('li').remove();
});
//alert($(this).text());
}
}).sortable({
items: "li:not(.placeholder)",
sort: function () {
$(this).removeClass("ui-state-default");
}
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.