jQuery 可拖放/可拖动答案

【问题标题】：jQuery droppable / draggablejQuery 可拖放/可拖动
【发布时间】：2008-11-12 09:14:27
【问题描述】：

目前我有一组 div，由 php 动态生成，它们的 id 都以“itembox”开头，并附加了一个计数。我在页面上有一个可放置的垃圾箱区域，以便用户可以通过拖放到垃圾箱中来删除单个项目框。

我的问题是，当我拖动原始文件时，droppable 似乎不会激活，而当我设置了 helper: 'clone' 时它会（完美地）起作用。不幸的是，当拖动时，克隆函数从 itembox 的第一次迭代中获取它的克隆，无论实际拖动哪个 itembox。

所以我正在寻找一种解决方案，要么让 droppable 接受原件，要么强制克隆功能从实际拖动的 itembox 中获取其克隆。

【问题讨论】：

标签： jquery jquery-ui-draggable jquery-ui-droppable

【解决方案1】：

我想问题一定出在您的可放置初始化程序的接受选项上。只需尝试以下方法：

$('#mydroppable').droppable(
{
    accept: function() { return true; },
    drop: function () { alert("Dropped!"); }
});

现在这将接受所有内容，因此您可能应该在接受函数中实现一些过滤，但是这应该可以工作。

【讨论】：

【解决方案2】：

您也可以尝试以下解决方案。

<script type="text/javascript">
$(document).ready(function(){
    $('.srcfield').draggable({
        revert: true    
    });

    $('#trash').droppable({
        accept : ".srcfield",
        over: function(){
            $(this).removeClass('out').addClass('over');
        },`enter code here`
        out: function(){
            $(this).removeClass('over').addClass('out');
        },
        drop: function(ev, ui){
            //var answer = confirm('Delete this item?');
            var theTitle = $(ui.draggable).attr("title");
            $(this).html("<u>"+theTitle+"</u><br/> is deleted!");
        }
    });
});
</script>


<body>
    <div id="trash" class="out">
            <span>Trash</span>
    </div>
    <div id="sourcefields">
            <div class="srcfield" title="First Name"><span>First Name</span></div>
            <div class="srcfield" title="Last Name"><span>Last Name</span></div>
            <div class="srcfield" title="Age"><span>Age</span></div>
    </div>
</body>

【讨论】：