Перетащите несколько div в другой jQuery - PullRequest
Новая
       43

Перетащите несколько div в другой jQuery

0 голосов
/ 26 ноября 2018

Я пытался перетащить div из одного div в другой, используя jQuery.Вот что у меня так далеко 

$(document).ready(function() {
  $(".draggable").draggable();
  $(".bucket").droppable({
    drop: function(event, ui) {
      if (($(this).attr('id')) !== ui.draggable.attr("data-bucket")) {
        ui.draggable.attr("data-bucket", $(this).attr('id'));

        var p1 = ui.draggable.parent().offset();
        $(this).append(ui.draggable);

        var p2 = ui.draggable.parent().offset();

        ui.draggable.css({
          top: parseInt(ui.draggable.css('top')) + (p1.top - p2.top),
          left: parseInt(ui.draggable.css('left')) + (p1.left - p2.left)
        });
      }
    }
  });
});
.bucket {
  width: 400px;
  height: 150px;
  background: #ddd
}

.draggable {
  width: 50px;
  height: 30px;
  margin-top: 5px;
  background: red;
}

#destination {
  background: #aaa
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<div class="bucket" id="origin">
  <div class="draggable" data-bucket="origin">Drop 1</div>
  <div class="draggable" data-bucket="origin">Drop 2</div>
  <div class="draggable" data-bucket="origin">Drop 3</div>
  <div class="draggable" data-bucket="origin">Drop 4</div>
</div>
<div class="bucket" id="destination">
</div>

Я адаптировал js из этого ответа, но для обработки нескольких перетаскиваемых элементов я использовал data-bucket Атрибут для применения позиционирования только тогда, когда элемент изначально помещен в корзину, а не каждый раз, когда он перемещается в нем.

Как видно из примера, это решение вроде работает, но один разболее двух div были перетащены в корзину назначения, затем все начинают прыгать вокруг и не приземляются там, где их помещает курсор

Кажется, это должно быть простое исправление, но я почесал свойВозьми это на день или около того, какая-нибудь помощь?

1 Ответ

0 голосов
/ 26 ноября 2018

Я установил для CSS .draggable divs значение position: absolute, а для родителей - position: relative.Также некоторые настройки для первоначального отображения абсолютных позиционированных div и отображения статуса после их удаления.

Пожалуйста, посмотрите на код ниже: 

    $(document).ready(function () {
        $.each( $(".draggable"), function( key, value ) {
            $(this).css('top',(35*key)+"px");
        });
        $(".draggable").mousedown(function() {
            $("#status").html('');
        })

        $(".draggable").draggable();
        $(".bucket").droppable({
            drop: function (event, ui) {
                $("#status").html(ui.draggable.html()+" is in the "+$(this).attr('id')+" bucket.");

                if (($(this).attr('id')) !== ui.draggable.attr("data-bucket")) {
                    ui.draggable.attr("data-bucket", $(this).attr('id'));

                    var p1 = ui.draggable.parent().offset();
                    $(this).append(ui.draggable);

                    var p2 = ui.draggable.parent().offset();

                    ui.draggable.css({
                        top: parseInt(ui.draggable.css('top')) + (p1.top - p2.top),
                        left: parseInt(ui.draggable.css('left')) + (p1.left - p2.left)
                    });
                }
            }
        });
    });
    .bucket {
        width: 400px;
        height: 150px;
        background: #ddd;
        position: relative;
    }

    .draggable {
        width: 50px;
        height: 30px;
        margin-top: 5px;
        background: red;
        position: absolute;
        z-index: 10;
    }

    #destination {
        background: #aaa;
        position: relative;
    }



    Drop 1
    Drop 2
    Drop 3
    Drop 4
...