5

Подскажите, как с помощью 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;
}
<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>

схема

1
  • jquery ui, draggable();
    – zkolya
    Commented 19 авг. 2015 в 18:17

1 ответ 1

2

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

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>

1
  • 2
    @Yuri, это не только Q&A-сервис, но и база данных, и местные вопросы хорошо индексируются Гуглом. Отвечать на старые вопросы, править и дополнять их - здесь это считается хорошей практикой (и даже поощрается - посмотрите на значки в профиле). Все таки мы не на форуме и даже не на Тостере.
    – Petr Flaks
    Commented 14 дек. 2016 в 20:25

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.