Блог

Главная - Вопросы по программированию - Создание списка перетаскиваемых объектов, выполняющих функцию с идентификаторами обоих при выпадении

Создание списка перетаскиваемых объектов, выполняющих функцию с идентификаторами обоих при выпадении

#javascript #html #drag-and-drop

#javascript #HTML #перетаскивание

Вопрос:

У меня есть ряд HTML-разделов, таких как:

 <span class="dragable" id="Apple">
<span class="dragable" id="Banana">
<span class="dragable" id="Carrot">

…и т.д. Моя цель — сделать каждый диапазон перетаскиваемым на любой другой диапазон. При этом будет вызвана функция JavaScript, которая каким-то образом определит идентификатор как перетаскиваемых, так и удаляемых элементов, а затем запишет их в консоль (для целей отладки, конечно)

Сделать эти промежутки перетаскиваемыми просто, но я не уверен, как выйти из передачи идентификаторов в JavaScript. Я видел несколько руководств по передаче идентификаторов через события, но не каких-либо четких.

Любые советы будут с благодарностью.

Ответ №1:

Вы можете использовать jQuery UI. Он обеспечивает перетаскивание так, как вам это нужно:

 $(document).ready(function() {
  var $output = $('#output');
  $(".draggable").draggable({revert: true}).droppable({
    drop: function(event, ui) {
      var $dragged = $(ui.draggable[0]);
      $output.text($dragged.attr('id')   " was dropped on "   $(this).attr('id'));
    }
  });
}); 
 .draggable {
  width: 50px;
  height: 50px;
  display: inline-block;
  border: 1px solid black;
  background: grey;
} 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
 
<span class="draggable" id="Apple"></span>
<span class="draggable" id="Banana"></span>
<span class="draggable" id="Carrot"></span>

<div id="output"></div>

Внимательно ознакомьтесь с документами draggable и droppable, чтобы увидеть полную функциональность.

Комментарии:

1. Отличный ответ! Помогло мне! Просто интересно, как это можно настроить так, чтобы кончик угла тоже учитывался? Это вообще регулируется?

2. Я думаю, что это невозможно, просто используя droppable. Вы могли бы проверить пересечения между двумя прямоугольниками. Проверьте пример событий из draggable, чтобы увидеть, как выполнить при перетаскивании перетаскиваемого объекта в любом месте. Но в любом случае, вы должны проверить вручную, если они перекрываются.

3. Да, я подумал об использовании верхнего и левого из отброшенного события, а затем вычислить все остальные позиции элементов и посмотреть, совпадают ли они, спасибо!

Метки: ,