javascript - 如何在使用 jquery ui 删除时对元素进行排序?
问题描述
我有非常简单的 jquery ui 代码来拖放元素。但是,我有一个问题,我不能在 drop 时对丢弃的元素进行排序!
我使用了 jquery 可排序功能,但我不知道问题出在哪里!
我在这里有完整的代码示例。如果我可以用其他方式解释它,我需要拖放第 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>
解决方案
为了避免重复,您可以将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>
推荐阅读
- vue.js - 从组件更改存储状态值
- asp.net-mvc - react-bootstrap-table-next - 未捕获的 ReferenceError:未定义 BootstrapTable
- server - 如何发布使用 h265 压缩的视频?
- java - 使用 Cups4j 在 android 中打印到 IPP 打印机时引发错误
- azure - 将 Web 应用程序发布到 Azure 时拒绝访问 /obj/Release/net461/win7-x86/PubTmp/Out/
- sql-server - 数字小于的第一行索引
- ios - CoreBluetooth 中的 CBCharateristicWithResponse 和 CBChatracteristicWithoutResponse 有什么区别?
- pdf - 有什么方法可以在 python 中读取分层 PDF
- vba - 'IUWebBrowser2' 对象的'Busy' 方法失败
- winapi - TryEnterCriticalSection 的用例是什么?