代码之家 › 专栏 › 技术社区 › Tim Sewell

jquery可下拉/可拖动

jquery-ui-droppable jquery-ui-draggable jquery

0

Tim Sewell · 技术社区 · 17 年前

目前我有一组div,由php动态生成,所有div的id都以“itembox”开头,并附加了一个计数。我在页面上有一个可丢弃的垃圾箱区域,这样用户就可以通过fDragging和Dropping来删除单个项框。

我的问题是,当我拖动原始文件时,Droppeble似乎不会激活,而当我设置了helper:'clone'时,它会(完美地)工作。然而,不幸的是,在拖动时,克隆函数从itembox的第一次迭代中获取其克隆,不管实际拖动的是哪个itembox。

所以我正在寻找一个解决方案,要么让Droppable接受一个原始的,要么强制克隆函数从实际拖动的项框中获取其克隆。

2 回复 | 直到 10 年前

1

Tamas Czinege 17 年前

我想问题一定在于你的可滴初始值设定项的接受选项。只需尝试以下操作:

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

现在,这将接受所有内容,所以您可能应该在accept函数中实现一些过滤,但无论如何,这都是可行的。

2

0

Wikki 14 年前

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

<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>