Drag and Drop block moving

Question

Tell me how using Drag and Drop to create moving rectangles like in the diagram?

Orange square can only be dragged to blue.

A blue square can only be dragged to green, with all its contents (that is, if orange is in a blue square, then if you move it to green, blue will move with it)

Likewise back so that you can pull out the blocks.

$(document).ready(function () { $("div.black, div.red").draggable({ revert: "invalid", helper: 'clone' }); var a_drop = $("div.red, div.blue"); a_drop.droppable({ drop: function (ev, ui) { if ($(ui.draggable).hasClass('new')) { $('.new').draggable({ revert: true }); } else { $(this).append($(ui.draggable).clone().draggable({ helper: "original" }).addClass('new')); } }, out: function (event, ui) { $(ui.draggable).fadeOut(1000, function () { $(this).remove(); }); }, hoverClass: "ui-state-hover" }); $("div.red").droppable({ accept: "div.black" }); $("div.blue").droppable({ accept: "div.red" }); });

 .wrapper { width: 600px; margin: 0 auto; } .all_black{ float: left; margin: 20px; } .all_red{ float: left; margin: 20px; } .all_blue{ float: left; margin: 20px; } .black { height:80px; width:80px; background-color: #000000; border:1px solid rgba(79, 106, 125, 0.48); color: #000000; padding:5px; margin: 25px; } .red { height:80px; width:90px; background-color: #ff0000; border:1px solid rgba(227, 142, 136, 0.48); color: #ff0000; padding:5px; margin: 25px; } .blue { height:80px; width:100px; background-color: #000dff; border:1px solid #9bd0ff; color: #000dff; padding:5px; margin: 25px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <div class="wrapper"> <div class="all_black"> <div class="black"></div> <div class="black"></div> <div class="black"></div> </div> <div class="all_red"> <div class="red"></div> <div class="red"></div> <div class="red"></div> </div> <div class="all_blue"> <div class="blue"></div> <div class="blue"></div> <div class="blue"></div> </div> </div>

Answer 1 · 2016-12-14T18:12:04

For the sake of a tick nothing is sorry!
True, you can not pull out the blocks from the group, because I did not understand a little how to implement it. Explain to me, please.

 var total = 0 Element.prototype.makeDraggable = function() { var o = this o.onmousedown = function(e) { var startX = parseInt(o.style.left) var startY = parseInt(o.style.top) var offsetX = e.pageX - startX var offsetY = e.pageY - startY o.style.zIndex = ++total document.onmousemove = function(e) { o.style.left = e.pageX - offsetX + 'px' o.style.top = e.pageY - offsetY + 'px' } document.onmouseup = function(e) { document.onmousemove = null; o.onmouseup = null; o.hidden = 1 var s = document.elementFromPoint(e.pageX, e.pageY) o.hidden = 0 if (s&&s.classList.contains("droppable") && o.dataset.level - 1 == s.dataset.level) { function append(p, c) { if (p.children[0]) append(p.children[0], c) else p.appendChild(c) } append(s, o) o.style.top = "10px" o.style.left = "10px" o.innerHTML = "Опа! Меня перетянули!" o.onmousedown = null } else { o.style.left = startX + 'px' o.style.top = startY + 'px' } } } o.ondragstart = function() { return 0 } } document.getElementById('object1').makeDraggable() document.getElementById('object2').makeDraggable() document.getElementById('object3').makeDraggable()

 .object { width: 100px; height: 100px; border: 1px solid black; position: absolute; color: white; padding: 10px; text-align: center; font-size: 15px; } #object1 { background: red; } #object2 { background: green; } #object3 { background: blue; }

 <div class="object droppable" id="object1" style="top:10px;left:10px" data-level=1>Мой уровень - 1, и меня нельзя перетянуть никуда</div> <div class="object droppable" id="object2" style="top:150px;left:10px" data-level=2>Мой уровень - 2, и меня можно перетянуть только в блок с уровнем 1</div> <div class="object droppable" id="object3" style="top:290px;left:10px" data-level=3>Мой уровень - 3 и меня можно перетянуть только в блок с уровнем 2</div>

@Yuri, this is not only a Q & A service, but also a database and local issues are well indexed by Google.
Answer old questions, edit and supplement them - here it is considered good practice (and even encouraged - look at the icons in the profile).
All the same, we are not on the forum and not even on the Toaster.

Drag and Drop block moving

1 answer 1

Protected by community spirit ♦ 25 Aug '15 at 13:22 .

More articles: