如何在 jQuery UI 中同时使用可排序和可拖动

Question

html:

<div class="item-list" id="list">
  <div class="draggable" data-index="0" draggable="true">Draggable1</div>
  <div class="draggable" data-index="1" draggable="true">Draggable2</div>
  <div class="draggable" data-index="2" draggable="true">Draggable3</div>
  <div class="draggable" data-index="3" draggable="true">Draggable4</div>
  <div class="draggable" data-index="4" draggable="true">Draggable5</div>
</div>
<div class="drawing-board dropzone" id="dropzone">

js:

$("#list").sortable().disableSelection(); 
$('.draggable').draggable({connectToSortable: "#list"});

演示

Gif 视频

将排序表中的项目拖到外面并允许它们自由移动，然后将它们拖回排序表中以重复之前的功能

Answer 1

请参阅此建议：https://jsfiddle.net/Twisty/zex0L2af/

JavaScript

$(function () {
  $("#list").sortable().disableSelection()
  $(".draggable").draggable({
    connectToSortable: "#list",
  })
  $("#dropzone").droppable({
    drop: function (event, ui) {
      $(ui.draggable).appendTo("#dropzone")
      $(ui.draggable).position({
        of: event,
      })
    },
  })
})

当项目被拖出并放下时，它会附加到

dropzone

并且仍然可拖动。如果将其拖回列表，则使用

ConnectToSortable

首选项。