Dragging multiple html elements at once

user_15900460 0
Viewed 64

I would like to be able to drag an image next to some text and have the text move with it, the problem is that I can either move the image or move the text not have one move the other my current code for that is:

<ol>
    <div style="cursor: move; user-select: none;">
        <img style="width: 50px;" src="hand.png" alt="drag">
            <h3 style="float: right" contenteditable='true'>sample</h3>
      </div>
   <h3 contenteditable='true'>sample2</h3>
</ol>

how would I make it so that I can drag the image and have it move the text?

css html
1 Answers

How to drag (and drop) an image back and forth between two elements:

<!DOCTYPE HTML>
<html>
<head>
<style>
#div1, #div2 {
float: left;
width: 100px;
height: 35px;
margin: 10px;
padding: 10px;
border: 1px solid black;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}

function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<h2>Drag and Drop</h2>
<p>Drag the image back and forth between the two div elements.</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>

<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

</body>
</html>

i am not sure if this is what you are looking for if not, please provide an example of what you need

or you can refer to this link for dragging multiple items: https://codepen.io/SitePoint/pen/gbdwjj

user_155556440
Related