Проблема с двумя сбрасываемыми элементами div при перетаскивании элемента (Jquery Ui) - PullRequest
Новая
       8

Проблема с двумя сбрасываемыми элементами div при перетаскивании элемента (Jquery Ui)

1 голос
/ 19 февраля 2020

У меня проблема с Jquery Ui Droppable.

У меня есть два элемента DROPROPBable внутри контейнера Div, когда я выбираю фиолетовое поле и перетаскиваю его сначала во второй элемент Div, а затем в первый во-первых, контейнер div выбирается вместе с первым div, это ошибка, которую я имею, в JsFiddle вокруг него включается красный цвет, когда я нахожусь поверх него. Я посмотрел на inte rnet, но не могу найти решение. Если я перетащу фиолетовую коробку в первый блок, а затем во второй, он будет работать нормально, но не наоборот. Я прикрепил картинку В JsFiddle отображается ошибка Спасибо

JsFiddle: https://jsfiddle.net/7unvxgqo/

$(document).ready(function () {


$("#draggable2").draggable({
    // opacity : 0.7, 
    helper: "clone",
    scope: 1,
    start: function (e, ui) {
        $(ui.helper).addClass("drag-helper");

        //console.log(ui);
    }
});


$(".draggable3").droppable({
    greedy: true,
    tolerance: 'pointer',
    scope: 1


});


$("#droppable").droppable({
    //Over
    greedy: true,
    tolerance: 'pointer',

    scope: 1
})

});

Изображение:

Красная граница активна при перетаскивании элемента в первый div

1 Ответ

0 голосов
/ 21 февраля 2020

Обходным решением может быть добавление небольшого поля между двумя вложенными элементами.

Пример: https://jsfiddle.net/Twisty/aL32ru7d/16/

HTML

<div id="draggable2" class="draggable">
</div>
<div class="container">
  <div id="drop-1" class="drop-zone">
    <p>Drop here</p>
    <div id="drop-nest-1" class="drop-nest">
      <p>First Div</p>
    </div>
    <div id="drop-nest-2" class="drop-nest">
      <p>Second Div</p>
    </div>
  </div>
</div>

CSS 

.drop-nest {
  width: 100%;
  height: 100px;
  background: #0066CC;
  border: 2px solid #00FF00;
  margin-bottom: 6px;
}

#draggable2 {
  height: 100px;
  width: 100px;
  background-color: #CC33CC;
  margin-bottom: 3em;
}

.drop-zone {
  width: 100%;
  height: 500px;
  padding: 0;
  border: 5px solid black;
  background-color: #777;
  margin: 0px !important;
}

.drag-helper {
  width: 50px;
  height: 50px;
  padding: 0px;
  border: 5px solid gray;
  background-color: #CC33CC;
}

.container {
  width: 100%;
  padding: 0px !important;
  margin: 0px !important;
}

.my-hover {
  border: 5px dashed #FF0000 !important;
}

body,
html {
  margin: 0px;
}

JavaScript

$(function() {
  $("#draggable2").draggable({
    // opacity : 0.7, 
    helper: "clone",
    scope: 1,
    start: function(e, ui) {
      $(ui.helper).addClass("drag-helper");
    }
  });

  $(".drop-zone, .drop-nest").droppable({
    greedy: true,
    tolerance: 'pointer',
    scope: 1,
    over: function(e, ui) {
      $(this).addClass("my-hover");
    },
    out: function(e, ui) {
      $(this).removeClass("my-hover");
    }
  });
});

Похоже, проблема быть связанным с опцией greedy и out. В течение доли секунды положение мыши вызывает оба, чтобы обнаружить over. Небольшое пространство может позволить мыши выбрать один из элементов, а не оба. Предостережение заключается в том, что если мышь перемещается очень быстро, она все равно может вызвать проблему.

Я выбрал 6px, но я проверил с несколькими значениями. Чем меньше зазор, тем легче его вызвать.

...