Drag and drop html element

Question

I have a div which can be dragged. If it's dragged, I would like to add its text to mouse and after leaving the mouse I want to show some menu like copy.

I have tried this:

<!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 using fake drag 'n drop.

The problem here is that it only works inside the body element.

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

For menu you use it:

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

Drag and drop html element

Question

2 answers

solution1
1 2014-07-21 13:10:31

solution2
0 2016-02-21 14:13:31

Drag and drop html element

Question

2 answers

solution1 1 2014-07-21 13:10:31

solution2 0 2016-02-21 14:13:31

solution1
1 2014-07-21 13:10:31

solution2
0 2016-02-21 14:13:31