jqueryUI里拖拽排序示例分析

示例参考 (这个站需要FQ才能看到效果)

其实是jqueryUI官方购物车拖拽添加例子的增强版,就是在拖拽的时候增加了排序

这个是html代码

代码如下:
  •   这个是js代码主要在js代码中红色代码部分设置了可以拖动进入时就排序,橙色代码部分不太理解,好像没用的样子

    代码如下:
    dion(); $("#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中拖拽排序问题的分析了,希望大家能够喜欢。

    相关文章

    页面搜索关键词突出 // 页面搜索关键词突出 $(function () {...
    jQuery实时显示日期、时间 html: <span id=&quot...
    jQuery 添加水印 <script src="../../../.....
    中文:Sys.WebForms.PageRequestManagerParserErrorExceptio...
    1. 用Response.Write方法 代码如下: Response.Write(&q...
    Jquery实现按钮点击遮罩加载,处理完后恢复 思路: 1.点击按...