时间:2021-05-26
示例参考http://jsfiddle.net/KyleMit/Geupm/2/ (这个站需要FQ才能看到效果)
其实是jqueryUI官方购物车拖拽添加例子的增强版,就是在拖拽的时候增加了排序
这个是html代码
复制代码 代码如下:
<div id="products">
<h1 class="ui-widget-header">Products</h1>
<div id="catalog">
<h2><a href="#">T-Shirts</a></h2>
<div>
<ul>
<li>Lolcat Shirt</li>
<li>Cheezeburger Shirt</li>
<li>Buckit Shirt</li>
</ul>
</div>
<h2><a href="#">Bags</a></h2>
<div>
<ul>
<li>Zebra Striped</li>
<li>Black Leather</li>
<li>Alligator Leather</li>
</ul>
</div>
<h2><a href="#">Gadgets</a></h2>
<div>
<ul>
<li>iPhone</li>
<li>iPod</li>
<li>iPad</li>
</ul>
</div>
</div>
</div>
<div id="cart">
<h1 class="ui-widget-header">Shopping Cart</h1>
<div class="ui-widget-content">
<ol>
<li class="placeholder">Add your items here</li>
</ol>
</div>
</div>
这个是js代码主要在js代码中红色代码部分设置了可以拖动进入时就排序,橙色代码部分不太理解,好像没用的样子
复制代码 代码如下:
$(function () {
$("#catalog").accordion();
$("#catalog li").draggable({
appendTo: "body",
helper: "clone",
connectToSortable: "#cart ol"
});
$("#cart ol").sortable({
items: "li:not(.placeholder)",
connectWith: "li",
sort: function () {
$(this).removeClass("ui-state-default");
},
over: function () {
//hides the placeholder when the item is over the sortable
$(".placeholder").hide();
},
out: function () {
if ($(this).children(":not(.placeholder)").length == 0) {
//shows the placeholder again if there are no items in the list
$(".placeholder").show();
}
}
});
});
另外值得一提的是
.ui-state-default貌似是拖拽时内置的一些类,对应的还有
ui-state-hover等分别对应当有可以拖拽的对象在拖拽时,和拖拽到容器时的效果,本文代码没有体现。
以上就是关于jQueryUI中拖拽排序问题的分析了,希望大家能够喜欢。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
最近工作用需要设计一个自由布局的页面设计。我选了jQueryUI的sortable,可以拖拽,自由排序使用很方便,写一个demo,做个记录。第一、单项目自由排序
使用jquery拖拽排序插件制作拖拽排序效果是一款非常实用的鼠标拖拽布局插件。效果图如下:效果演示源码下载html代码:水平拖拽12345$(function(
简介在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jqueryui中的sortable.js,只是在拖拽完成后,在update的回调
网上有许多给BootstrapModal添加拖拽实现,但是许多代码看起来都比较复杂感觉封装性可能也不太好,有的甚至使用了jqueryui的拖拽功能,这些都不是我
项目要实现一些控件的拖拽排序。从而找到了这款vuedraggable控件,供大家参考,具体内容如下如上图要实现这些控件的拖拽排序这是拖拽后由于公司网络的原因,项