Question

我正在努力做一个小小的拖累在我的网站上删除功能，我得到了拖放功能掉落功能正常。用户可以将图像拖放到.vote容器中，但是当有人想要替换它们时，它们是先前删除的图像与另一个图像，它只是添加它，因此.vote容器中有两个图像

这个想法是，当有人将图像放入#container，然后在其中删除另一张图像时，第一张图像会返回#drag容器。但我无法弄清楚我可以使用哪种功能。

这是我用于拖放的代码。下降。

$(document).ready(function () {

    addElements();
    $(function () {
        $(".vote, #drag").sortable({
            connectWith: ".vote , #drag",
            cursor: "move"
        }).disableSelection();
    });

    function addElements() {
        $(".vote, #drag").append();
    }

});

所以问题是，如何检查.vote div中是否存在所有准备好的图像。如果已有图像，我该如何将该图像移回#drag容器？

Answer 1

要检查容器中是否已有图像，可以使用两种功能。

.children()来电，它会为您提供.vote或.find('img')中包含的所有元素，这些元素会返回.vote中包含的图片。

Answer 2

在这个Fiddle中可能有一个解决你的问题的办法在左侧sisde上有一些可以在右侧区域拖动的图像＆＃34;当有人将图像放入#container然后再将其中的图像放入其中时，第一张图像会返回#drag容器＆＃34;。
您需要的所有jQuery代码是：

<script type="text/javascript">
$(document).ready(function(){
        $('.dr').on("dragstart", function (event) {
              var dt = event.originalEvent.dataTransfer;
              dt.setData('Text', $(this).attr('id'));
            });

        $('#container').on("dragenter dragover drop", function (event) {    
           event.preventDefault();
           if (event.type === 'drop') {
              var old=$(this).find('.dr').detach()
              old.appendTo('#drag').removeAttr('style')
              var data = event.originalEvent.dataTransfer.getData('Text',$(this).attr('id'));
              de=$('#'+data).detach();
              de.css({'position':'absolute','top':0+'px','left':0+'px'}).appendTo($(this)); 
           };
       });
})
</script>

jQuery用拖动替换图像;下降

2 个答案: