Question

我使用标准的javascript代码进行拖放操作，然后对其进行修改以在拖放区域拖动图像的副本。我无法弄清楚，因为我对javascript一无所知，当我在其上拖动另一个时，为了替换/交换丢弃的图像该怎么办。请帮助!!我真的很感激！我使用下面的代码，我更喜欢当前代码有一个解决方法，如果没有有任何简单的方法来解决这个问题？非常感谢！

function allowDrop(ev) {
ev.preventDefault();
}

function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}

function dragEnter(ev) {
ev.preventDefault();
}

function drop(ev) {
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data).cloneNode(true));

ev.preventDefault();
}

Answer 1

在此Fiddle中，当您在拖放区域上拖动图像时（dx上的蓝色div）如果在拖放区域中有图像，则此图像会消失，新的拖动图像显示
您需要的jQuery代码是

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

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

对于这个结果我使用拖放api html5

拖动图像的副本不会在另一个上面删除

1 个答案: