Как использовать jquery dropable для удаления элемента в указанной позиции c? - PullRequest
Новая
       66

Как использовать jquery dropable для удаления элемента в указанной позиции c?

0 голосов
/ 11 июля 2020

Пробую сделать редактор с сайдбаром. для перетаскивания компонентов с боковой панели в область редактора.

Но у меня были некоторые проблемы. наиболее критичным является.

для сортировки отброшенного компонента в указанной c позиции в области редактора , например или, другими словами, мне нужно перетащить компонент 1 и компонент 2, а затем компонент 3 между 1 и 2.

Я использовал для этой функции jquery sortable.

Ошибка :

У меня нет сортировки для отброшенного компонента, более того, если я попытаюсь отсортировать отброшенные компоненты позже, я получу компоненты, клонированные внутри области редактора, а не сортирую его

вот моя попытка 

$( 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>

1 Ответ

0 голосов
/ 13 июля 2020

Рассмотрите возможность использования 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>

Затем клонированные элементы удаляются непосредственно в Сортируемый.

...