Вот jsFiddle общей концепции того, что я собираюсь:
HTML и JS:
<!DOCTYPE HTML>
<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>
<body>
<div id="bracelet">
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
<br/><br/><br/><br/><br/>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag1" src= "http://upload.wikimedia.org/wikipedia/commons/4/4f/Button-Red.svg" draggable="true" ondragstart="drag(event)" width="50" height="50">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag2" src= "http://upload.wikimedia.org/wikipedia/commons/a/a8/Button-Blue.svg" draggable="true" ondragstart="drag(event)" width="50" height="50">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag3" src= "http://upload.wikimedia.org/wikipedia/commons/c/ca/Button-Lightblue.svg" draggable="true" ondragstart="drag(event)" width="50" height="50">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag4" src= "http://upload.wikimedia.org/wikipedia/commons/b/ba/Button-Purple.svg" draggable="true" ondragstart="drag(event)" width="50" height="50">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag5" src= "http://upload.wikimedia.org/wikipedia/commons/6/68/Button-Orange.svg" draggable="true" ondragstart="drag(event)" width="50" height="50">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag6" src= "http://upload.wikimedia.org/wikipedia/commons/d/dc/Button-Green.svg" draggable="true" ondragstart="drag(event)" width="50" height="50">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag7" src= "http://upload.wikimedia.org/wikipedia/commons/4/4f/Button-Red.svg" draggable="true" ondragstart="drag(event)" width="50" height="50">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag8" src= "http://upload.wikimedia.org/wikipedia/commons/a/a8/Button-Blue.svg" draggable="true" ondragstart="drag(event)" width="50" height="50">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag9" src= "http://upload.wikimedia.org/wikipedia/commons/c/ca/Button-Lightblue.svg" draggable="true" ondragstart="drag(event)" width="50" height="50">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag10" src= "http://upload.wikimedia.org/wikipedia/commons/b/ba/Button-Purple.svg" draggable="true" ondragstart="drag(event)" width="50" height="50">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag11" src= "http://upload.wikimedia.org/wikipedia/commons/6/68/Button-Orange.svg" draggable="true" ondragstart="drag(event)" width="50" height="50">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag12" src= "http://upload.wikimedia.org/wikipedia/commons/d/dc/Button-Green.svg" draggable="true" ondragstart="drag(event)" width="50" height="50">
</div>
CSS:
#div1 {
width:50px;
height:50px;
padding:10px;
border:1px solid #aaaaaa;
display: inline;
float: left;
margin-bottom: 25px;
margin-left: 50px
}
#div2 {
width:50px;
height:50px;
padding:10px;
border:1px solid #aaaaaa;
display: inline;
float: left;
}
#bracelet {
width:420px;
height:75px;
padding: 10px;
margin-left: 30px;
border:1px solid #aaaaaa;
background-color: gray;
}
То, что я пытаюсь выполнить, - это перемещать изображение на место падения, а затем просто поместить его в другое место и вернуть его туда, где оно было первоначально. В настоящее время его можно отбрасывать только на указанный div, но я хотел бы, чтобы он мог быть сброшен где угодно, чтобы вернуться туда, где он был первоначально.
Любая помощь приветствуется.
Вы можете определить, был ли элемент dragend
из элемента dragend
событие dragend
.
<img ... draggable="true" ondragend="dragEnd(event)" ondragstart="drag(event)">
function dragEnd(ev){
if(ev.dataTransfer.dropEffect == "none"){
// REVERT BACK TO ORIGINAL POSITION
}
}
Затем вам нужно решить, как вы хотите определить, что такое "исходная позиция". Возможно, вы data-
сохранить id
исходного родителя в data-
а затем прочитать его и добавить обратно к этому родителю. Другой вариант может состоять в том, чтобы заполнить эти data-
помощью javascript при начальной загрузке страницы или даже при первом dragstart
.
EDIT: Рабочий пример:
Вы заметите, что мне пришлось устранить дублированный id
поскольку они должны быть уникальными.
function drag(ev) {
var el = ev.target;
var parent = el.getAttribute("data-parent");
// if the parent data attribute is not yet set, set it to current parent
if(!parent){
el.setAttribute("data-parent", el.parentNode.id);
}
ev.dataTransfer.setData("Text", el.id);
}
function dragEnd(ev){
if(ev.dataTransfer.dropEffect == "none"){
// get parent from data attribute
var parent = document.getElementById(ev.target.getAttribute("data-parent"));
// append back to the original parent
parent.appendChild(ev.target);
}
}