Question

我有一个可以拖动的 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>

Answer 1

SOLUTION 使用假拖动。

这里的问题是它只能在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();

Answer 2

对于菜单，您可以使用它：

<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>

拖放html元素

2 个答案: