jQuery用拖放替换图像答案

【问题标题】：jQuery replace image with drag & dropjQuery用拖放替换图像
【发布时间】：2014-05-26 07:50:15
【问题描述】：

我正在我的网站上开发一个小型拖放功能，并且我的拖放功能运行良好。用户可以将图像拖放到.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 容器？

【问题讨论】：

请为您的代码制作一个 jsfiddle。
jsfiddle.net/nkLtm 小提琴来了。

标签： jquery drag-and-drop

【解决方案1】：

在这个Fiddle 中可能有解决您问题的方法。
在左侧有一些可以在右侧区域拖动的图像。
“当有人将图像放入#container，然后将另一个图像放入其中时，第一个图像会返回到#drag 容器中”。
您需要的所有 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>

【讨论】：

【解决方案2】：

要检查容器中是否已经存在图像，可以使用两种函数。

.children() 调用，它为您提供 .vote 或 .find('img') 中包含的所有元素，返回 .vote 中包含的图像。

【讨论】：