如何在使用 jquery ui 删除时对元素进行排序？

Posted 2023-05-08

【中文标题】如何在使用 jquery ui 删除时对元素进行排序？

【英文标题】：how to sort elements while dropping using jquery ui?

【发布时间】：2020-11-03 11:56:41

【问题描述】：

我有非常简单的 jquery ui 代码来拖放元素。但是，我遇到了一个问题，我无法对丢弃的元素进行排序！

我使用了 jquery 可排序功能，但我不知道问题出在哪里！！

我有完整的代码示例here。如果我可以用其他方式解释它，我需要拖放第 1 节，然后拖放第 2 节，最后在第 1 节和第 2 节之间对第 3 节进行排序，同时拖放它。你能帮帮我吗？

$(function() 
  $("#side").resizable(
    handles: 'e'
  );

  $("#editor").sortable().disableSelection()
    .droppable(
      drop: function(event, ui) 
        $(this)
          .append('<div contenteditable="true" ' +
            'class="alert alert-danger">' +
            $(ui.draggable).html() + '</div>')
          .animate(
            width: "250px"
          , 700);
      
    );

  $(".item")
    .mousedown(function() 
      $(this).css('cursor', 'grabbing');
    )
    .draggable(
      helper: "clone"
    );
);

#container 
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;


#editor 
  flex: 1;
  margin: 0 auto;
  height: 100vh;
  background-color: DodgerBlue;
  text-align: right;
  padding: 20px;


#side 
  min-width: 130px;
  max-width: 260px;
  height: 100vh;
  background: #708090;
  border: 1px solid #696969;
  color: yellow;


.item 
  border: 1px solid #DCDCDC;
  border-radius: .4em;
  background-color: white;
  color: #000;
  padding: 12px;
  margin: 10px;
  display: inline-block;


.item:hover 
  cursor: grab;

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet"/>

<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>



<div id="container">

  <div id="side">
    <h3 id="title" class="ml-2 mt-2">I'm resizable</h3>
    <i class="fa fa-align-center item"> Section 1</i>
    <i class="fa fa-align-center item"> Section 2</i>
    <i class="fa fa-align-center item"> Section 3</i>
    <i class="fa fa-align-center item"> Section 4</i>
    <i class="fa fa-align-center item"> Section 5</i>
    <i class="fa fa-align-center item"> Section 6</i>

  </div>

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

</div>

【问题讨论】：

似乎您已经在“我可以编辑”部分实现了排序选项。你是问east drop 既要元素又要复制的问题？

@MoshFeu 是的，我不能在我想要的地方放置任何元素。它总是排序到列表中的最后一个位置。此外，当我尝试对元素进行排序时，我会得到不需要的克隆！

【参考方案1】：

为了避免重复，您可以将accept: '.item' 选项添加到.droppable 选项中。这样，只有.item 元素可以被删除，所以drop 回调将只针对从侧栏拖动的元素触发。

关于拖动+排序相同而不丢弃，我不确定它是否可能。我相信排序机制仅适用于容器中已经存在的项目，但是您拖动一个尚未在容器中的元素。

$(function() 
  $("#side").resizable(
    handles: 'e'
  );

  $("#editor").sortable().disableSelection()
    .droppable(
      accept: '.item',
      drop: function(event, ui) 
        $(this)
          .append('<div contenteditable="true" ' +
            'class="alert alert-danger">' +
            $(ui.draggable).html() + '</div>')
          .animate(
            width: "250px"
          , 700);
      
    );

  $(".item")
    .mousedown(function() 
      $(this).css('cursor', 'grabbing');
    )
    .draggable(
      helper: "clone"
    );
);

#container 
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;


#editor 
  flex: 1;
  margin: 0 auto;
  height: 100vh;
  background-color: DodgerBlue;
  text-align: right;
  padding: 20px;


#side 
  min-width: 130px;
  max-width: 260px;
  height: 100vh;
  background: #708090;
  border: 1px solid #696969;
  color: yellow;


.item 
  border: 1px solid #DCDCDC;
  border-radius: .4em;
  background-color: white;
  color: #000;
  padding: 12px;
  margin: 10px;
  display: inline-block;


.item:hover 
  cursor: grab;

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet" />
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>

<div id="container">
  <div id="side">
    <h3 id="title" class="ml-2 mt-2">I'm resizable</h3>
    <i class="fa fa-align-center item"> Section 1</i>
    <i class="fa fa-align-center item"> Section 2</i>
    <i class="fa fa-align-center item"> Section 3</i>
    <i class="fa fa-align-center item"> Section 4</i>
    <i class="fa fa-align-center item"> Section 5</i>
    <i class="fa fa-align-center item"> Section 6</i>
  </div>
  <div id="editor" contenteditable="true">
    <h3 id="title">I'm editable</h3>
    <p></p>
  </div>
</div>