Drag an object using HTML CSS and JS

Question

I want to move an html element inside a web page, but all the examples I can find are related to move an element to another element:

event.target.appendChild(document.getElementById(data));

I can't find a way to move an element on an empty web page (I don't want to use divs since I want to create a workflow generator)

This is the code from w3schools, I removed the information not needed, this code has 2 divs and a paragraph element, and you can drag the <p> between both divs, but not outside them, which is what I want to do, any suggestion will be well appreciated:

<!DOCTYPE HTML>
<html>
<head>
<style>
.droptarget {
    float: left; 
    width: 100px; 
    height: 35px;
    margin: 15px;
    padding: 10px;
    border: 1px solid #aaaaaa;
}
</style>
</head>
<body>
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
  <p ondragstart="dragStart(event)" draggable="true" id="dragtarget">Drag me!</p>
</div>

<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<script>
function dragStart(event) {
    event.dataTransfer.setData("Text", event.target.id);
}

function allowDrop(event) {
    event.preventDefault();
}

function drop(event) {
    event.preventDefault();
    var data = event.dataTransfer.getData("Text");
//this is what I don't want to do, I want to move the paragraph freely
    event.target.appendChild(document.getElementById(data));
}
</script>

</body>
</html>

christutty · Accepted Answer · 2016-02-07 00:45:44Z

2

It sounds like what you want is demonstrated by the jquery draggable support - demo here of moving a rectangle around in a box: https://jqueryui.com/draggable/

answered Feb 7, 2016 at 0:45

christutty

9525 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

DHLopez Over a year ago

Correct! I have never used jquery, seems like a good time to start learning, Thanks.

Gavriel Over a year ago

But that demo does what his demo does: it allows to drop on a certain div, but not on the whole page.

christutty Over a year ago

@Gavriel - Not quite, it's movement within a target and you've explained how to make the body a suitable container. My suggestion is that using a pre-built jquery implementation seems better than writing the same code yourself. But yes, yours is more correct as an answer so I've upvoted it.

Gavriel Over a year ago

@christutty, ah I see, yes, I agree, I would also not try to reinvent the wheel, but neither jquery, nor jquery-ui was in in the tags.

DHLopez Over a year ago

Along with this answer, I tried getting the code from the link (there is a section where you can see and copy the code), when I executed that locally, it did not work, changing the script 'src' to the google CDN worked fine

Gavriel · Accepted Answer · 2016-02-07 00:49:22Z

1

Then make your body droppable:

<body class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">

or just nest everything in a div:

<body>
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
  ... all the rest comes here
</div>
</body>

answered Feb 7, 2016 at 0:49

Gavriel

19.3k13 gold badges73 silver badges116 bronze badges

1 Comment

DHLopez Over a year ago

Thank you Gavriel, at the end I finished using the Jquery option and so far it is working great.Regards!

Collectives™ on Stack Overflow

Drag an object using HTML CSS and JS

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related