drag and drop move in real time

Question

How to use html drag and drop api and pure js to achieve this effect https://stackblitz.com/angular/pldxjeolvdy?file=app%2Fcdk-drag-drop-overview-example.ts

In a word, making an element move in realtime(not default shadow effect).

I was trying to use same drop() method of ondrop event in dragover event but failed. So I searched online and it seems like we can't get e.dataTransfer.getData('text') in dragover event.

HTML5 Drag and Drop anywhere on the screen use this answer I can move div around but it's not realtime like the example i attached

You can use javascript `mouseDown()` and `mouseUp()` functions. When mouse down, add css to div `position: absolute;` and follow mouse pointer. You should also write code for such a plugin and try it out. When you fail, you can write down the sample code and ask for help. Because we help you, but we don't write code for you. — ariferol01, Aug 12 '19 at 21:03
@ariferol01 hi, thanks, your approach makes perfect sense. All I need is just an idea or a way to fix above 'HTML5 Drag and Drop anywhere on the screen' example. So, In your opinion, is drag and drop api not able to achieve the same effect? if that's the case I'll use mouseDown — omegaz, Aug 13 '19 at 13:07
I can't say anything clear about it without trying, but i saw that there is a `draggable()` function on the jQuery Ui. If you want, i can write an answer for jQuery Ui `draggable()` — ariferol01, Aug 13 '19 at 13:13
@ariferol01 Hey I just read 2 Drag libs and appears they are all using mousedown and mousemove to do it. thanks. If you can answer what you said in the comment I'd accept it. — omegaz, Aug 13 '19 at 13:36

score 1 · Accepted Answer · answered Aug 13 '19 at 14:20

If you want to solve this problem with less code, you can use jQuery Ui draggable(); function for realtime moving any element.

$( function() {
    $("#drag").draggable();
  } );

#drag {
width: 150px;
height: 150px;
padding: 10px; 
z-index:9;
cursor: all-scroll;
color:#fff;
background-color: green;
}

.other{
width:90%;
position:relative;
padding: 10px;
background-color: red;
color:#fff;
z-index: 0;
margin-top:10px;
}

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Draggable element</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>
<body>
 
<div id="drag" class="ui-widget-content">
  Drag this div
</div>

<div class="other">
<h4>Other elements </h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</div>
 
</body>
</html>

drag and drop move in real time

1 Answers1