zoukankan      html  css  js  c++  java
  • 关于jqueryUI里的拖拽排序

    主要参考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等分别对应当有可以拖拽的对象在拖拽时,和拖拽到容器时的效果,本文代码没有体现。

  • 相关阅读:
    数据结构 课程安排 (拓扑排序)
    数据结构 通畅工程 (最小生成树)
    01 C#基础
    计算机组成原理——第一章 系统概述
    数据结构——第八章 排序 第九章 文件
    数据结构——第七章 查找
    字符编码(转)
    数据结构——第六章 图
    NodeJS加密算法(转)
    入职总结
  • 原文地址:https://www.cnblogs.com/uxinxin/p/4299889.html
Copyright © 2011-2022 走看看