拖动图像的副本不会使另一个图像放到上面

dragging a copy of an image doesn't drop another one on top

本文关键字：图像 另一个 到上面 副本 拖动      更新时间：2023-09-26

我使用标准的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();
}


当你在拖放区域(蓝色div on dx)上拖动图像时，如果在拖放区域中有图像，则该图像将消失，新拖动的图像显示
你需要的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
相关文章：