如何使用 jquery droppable 在特定位置放置元素？

Question

我尝试制作一个带有侧边栏的编辑器。将组件从侧边栏拖到编辑器区域。

但是，我遇到了一些问题。最关键的是。

将特定位置的拖放组件排序到编辑器区域for example 或者换句话说，我需要拖放组件 1 和组件 2，然后在 1 和 2 之间拖放组件 3 .

我用于 jquery 可排序功能。

错误:

I get no sort for the dropped component, moreover, if I try to sort the dropped components later, I get components cloned inside the editor area rather than get it sorted

here is my attempt

$( function() {
  
      $("#side").resizable().draggable();
  
  
      $("#editor")
        .sortable().disableSelection().droppable({
      accept: ".component",
      drop: function(event, ui) 
        { $(this).append(ui.draggable.clone()); }
      });
  
  
      $(".component")
        .mousedown
      (function(){ $(this).css('cursor','grabbing'); })
        .draggable
      ({ helper: "clone" });
  
});

#editor, #side, .component{padding: 10px;}

#editor {
  position: fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:#9999;
  z-index: -1;
  text-align: right;
  cursor: default;
}

#side{
  position: fixed;
  top:0;
  left:0;
  width:300px;
  height: 100vh;
  background:red;
  color:yellow;
  cursor: move;
}

.component{
  background-color:blue;
  width: 80px;
  height: 50px;
  margin:20px;
  display: inline-block;
}
.component:hover{
  cursor:grab;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="side">
  <h3 id="title">I'm resizable and draggable</h3>
  <div class="component">
    I'm droppable 1
  </div>
  <div class="component">
    I'm droppable 2
  </div>
  <div class="component">
    I'm droppable 3
  </div>
  <div class="component">
    I'm droppable 4
  </div>
</div>
  
<div id="editor" contenteditable="true">
  <h3 id="title">I'm editable</h3>
</div>

Answer 1

考虑将 connectToSortable 与您的 Draggable 一起使用。请参阅以下示例。

$(function() {
  $("#side").resizable().draggable();
  $("#editor")
    .sortable({
      items: "div.component"
    }).disableSelection();
  $(".component")
    .mousedown(function() {
      $(this).css('cursor', 'grabbing');
    })
    .draggable({
      helper: "clone",
      connectToSortable: "#editor"
    });
});

#editor,
#side,
.component {
  padding: 10px;
}

#editor {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #9999;
  z-index: -1;
  text-align: right;
  cursor: default;
}

#side {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 100vh;
  background: red;
  color: yellow;
  cursor: move;
}

.component {
  background-color: blue;
  width: 80px;
  height: 50px;
  margin: 20px;
  display: inline-block;
}

.component:hover {
  cursor: grab;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="side">
  <h3 id="title">I'm resizable and draggable</h3>
  <div class="component">
    I'm droppable 1
  </div>
  <div class="component">
    I'm droppable 2
  </div>
  <div class="component">
    I'm droppable 3
  </div>
  <div class="component">
    I'm droppable 4
  </div>
</div>

<div id="editor" contenteditable="true">
  <h3 id="title">I'm editable</h3>
</div>

然后将克隆的项目直接放入 Sortable。

如何使用 jquery droppable 在特定位置放置元素？

How to use jquery droppable to drop element at specific position?

javascript

jquery

jquery-ui