Drag and Drop перемещение блока

#javascript #jquery

Подскажите, как с помощью Drag and Drop, создать перемещение прямоугольников как
на схеме?



Оранжевый квадрат можно перетянуть только в синий.

Синий квадрат можно перетянуть только в зеленый, со всем его содержанием ( то есть,
если в синем квадрате находится оранжевый, то если его переместить в зеленый, синий
переместиться вместе с ним)

Так же и назад, что бы можно было вытягивать блоки.



$(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;
}




    

        

        

        

    

    

        

        

        

    

    

        

        

        

    






    

Ответы

Ответ 1

Ради галочки ничего не жалко!
Правда, здесь нельзя вытягивать блоки из группы, поскольку я немного не понял, как
это надо реализовать. Объясните мне, пожалуйста.



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;
}
Мой
уровень - 1, и меня нельзя перетянуть никуда
Мой
уровень - 2, и меня можно перетянуть только в блок с уровнем 1
Мой
уровень - 3 и меня можно перетянуть только в блок с уровнем 2