拖放html元素

Drag and drop html element

本文关键字：元素 html 拖放      更新时间：2023-09-26

我有一个div可以拖动。如果它被拖动，我想把它的文本添加到鼠标，离开鼠标后，我想显示一些菜单，如复制。

我已经试过了:

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <style>
            #div1 
            {
                width:350px;
                height:70px;
                padding:10px;
                border:1px solid #aaaaaa;
            }
        </style>
        <script>
            function drag(ev)
            { 
                ev.dataTransfer.setData("Text",ev.target.id);
            }
            function drop(ev)
            {
                ev.preventDefault();
                //console.log(ev.dataTransfer);
                //var data=ev.dataTransfer.getData("Text");
                //ev.target.appendChild(document.getElementById(data));
                alert(ev.target.id);
            } 
            function allowDrop(ev){
                ev.preventDefault();
            }
        </script>
    </head>
<body>

<a draggable="true" ondragstart="drag(event)" id="drag-id" >dragme</a>
<div id="div1" style="border: solid 1px; width:40px; height:40px;"  ondrop="return drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>

解决方案使用假拖放

这里的问题是它只在body元素中起作用。

var fakeDrag = {
  setup: function(){
    fakeDrag.el = document.createElement('span');
    fakeDrag.el.style['pointer-events'] = 'none';
    fakeDrag.el.style['position'] = 'absolute';
    fakeDrag.el.style['display'] = 'none';
    fakeDrag.el.textContent = 'dragging';
    document.body.appendChild(fakeDrag.el);
  },  
  dragging: false,  
  drag: function(event){
    if(event.target.classList.contains('drag')){
      fakeDrag.dragging = true;
      fakeDrag.source = event.target;
      fakeDrag.el.style['display'] = 'inline';
    }
  },
  dragmove: function(event){
    fakeDrag.el.style['top'] = ++event.clientY+'px';
    fakeDrag.el.style['left'] = ++event.clientX+'px';
  },
  drop: function(event){
    if(event.target.classList.contains('drop') && fakeDrag.dragging){    
      event.target.textContent = fakeDrag.source.textContent;
    }
    fakeDrag.dragging = false;
    fakeDrag.el.style['display'] = 'none';
  }
};
fakeDrag.setup();

菜单:

<div id="context_menu" style="width:150px;border:1px solid black;background-color:#EEEEEE;visibility:hidden;position:absolute;line-height:30px; padding-left: 10px">
    <div id="copy" onclick="CopyFunction(this)" divIDMenu="">copy</div>
    <div id="paste"onclick="PasteFunction(this)" divIDCopy="" divIDMenu="">paste</div>
    <div id="cut" onclick="cutFunction(this)"divIDMenu="">cut</div>
    <div id="delete" onclick="deleteFunction(this)" divIDMenu="">delete</div>
    <div id="reload" onclick="reloadFunction(this)" divIDMenu="">reload</div>
</div>
相关文章：