<!DOCTYPE html>

<html lang="en">

  <head>

  <meta charset="utf-8">

  <title>jQuery UI Sortable - Portlets</title>

  <script src="jquery-1.6.2.js"></script>

  <script src="jquery.ui.core.js"></script>

  <script src="jquery.ui.widget.js"></script>

  <script src="jquery.ui.mouse.js"></script>

  <script src="jquery.ui.sortable.js"></script>

  <style type="text/css">

   .column { width: 33%; float: left; padding-bottom: 100px; border:solid 1px green;}

   .portlet { margin: 0 1em 1em 0;border:solid 1px blue; margin-left:10px; margin-top:10px;}

  .portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em;}

   .portlet-header .ui-icon { float: right; }  .portlet-content { padding: 0.4em; }

  .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }

   .ui-sortable-placeholder * { visibility: hidden; }

  .as{ border:solid 1px red; height:100px;}

  </style>

  <script type="text/javascript">

     $(function() {

      $( ".column" ).sortable({

        appendTo: "parent",

        axis: false,  //元素仅能横向或纵向拖动。可选值:'x', 'y'

        connectWith: ".column", //允许sortable对象连接另一个sortable对象,可将item元素拖拽到另一个中

       containment: false, //约束排序动作只能在一个指定的范围内发生。可选值:DOM对象, 'parent', 'document', 'window', 或jQuery对象

        cursor: 'auto',  //定义在开始排序动作时,如果的样式。

        cursorAt: false, //当开始移动时,鼠标定位在的某个位置上(最多两个方向)。

        //delay :1000,  //以毫秒为单位,设置延迟多久才激活排序动作。此参数可防止误点击。

       //distance:100,  //决定至少要在元素上面拖动多少像素后,才正式触发排序动作。

       dropOnEmpty: true, //是否允許拖拽到一個空的sortable对象中

       forcePlaceholderSize: false,

       forceHelperSize: false,

      grid:false ,  //将排序对象的item元素视为一个格子处理,每次移动都按一个格子大小移动,数组值:[x,y]

          handle: false,  //限制排序的动作只能在item元素中的某个元素开始。

      helper: "original",  //设置是否在拖拽元素时,显示一个辅助的元素。可选值:’original’, ‘clone’

      items: '> *',  //当前拖拽的元素

      opacity: false,  //定义当排序时,辅助元素(helper)显示的透明度。  0.6

      placeholder: false, //设置当排序动作发生时,空白占位符的CSS样式。.css{}

      revert: false,  //如果设置成true,则被拖拽的元素在返回新位置时,会有一个动画效果。

      scroll: true, //如果设置成true,则元素被拖动到页面边缘时,会自动滚动。

        scrollSensitivity: 20, //设置当元素移动至边缘多少像素时,便开始滚动页面。

      scrollSpeed: 100,  //设置页面滚动的速度。

         scope: "pointer",

      tolerance: "intersect", //设置当拖动元素越过其它元素多少时便对元素进行重新排序。可选值:’intersect’:至少重叠50%, ‘pointer’:鼠标指针重叠元素.

       zIndex: 1000,  //设置在排序动作发生时,元素的z-index值。,

        //destroy,  //从元素中移除拖拽功能。

     //disable,  //禁用元素的拖拽功能。

       //enable,  //启用元素的拖拽功能。'

     //option, //获取或设置元素的参数。 用法:.sortable( 'option' , optionName , [value] )

     //serialize, //获取或设置序列化后的每个item元素的id属性。用法:.sortable( 'serialize', [options] )

     //toArray,  //获取序列化后的每个item元素的id属性的数组。用法:.sortable( 'toArray' )

    //refresh,  //手动重新刷新当前sortable对象的item元素的排序。用法:.sortable( 'refresh' )

    //refreshPositions,  //手动重新刷新当前sortable对象的item元素的坐标,此方法可能会降低性能。    //cancel  //取消当前sortable对象中item元素的排序改变。

  });

   //$('.column').bind('sortstart', function(event, ui) {alert("sortstart")}); //当排序动作开始时触发此事件。

   //$('.column').bind('sort', function(event, ui) {alert("sort")});   //当元素发生排序时触发此事件

  //$('.column').bind('change', function(event, ui) {alert("change")});  //当元素发生排序且坐标已发生改变时触发此事件。

  //$('.column').bind('beforeStop', function(event, ui) {alert("beforeStop")}); //当排序动作结束之前触发此事件。此时占位符元素和辅助元素仍有效。

//$('.column').bind('sortstop', function(event, ui) {alert("sortstop")});  //排序结束

  //$('.column').bind('sortupdate', function(event, ui) {alert("sortupdate")});

   //排序动作结束时且元素坐标已经发生改变   //$('.column').bind('sortreceive', function(event, ui) {alert("sortreceive")});//一个sortable对象 接收 到另一个sortable对象的元素

  //$('.column').bind('sortover', function(event, ui) {alert("sortover")});  //一个sortable对象 拖拽移入 另一个sortable对象

   //$('.column').bind('sortout', function(event, ui) {alert("sortout")}); //当一个元素拖拽移出sortable对象移出并进入另一个sortable对象后触发此事件。

  //$('.column').bind('sortchange', function(event, ui) {alert("sortchange")});  //当元素发生排序且坐标已发生改变时触发此事件。

  //$('.column').bind('sortactivate', function(event, ui) {alert("sortactivate")});  //当一个有使用连接的sortable对象开始排序动作时,所有允许的sortable触发此事件。

    //$('.column').bind('sortdeactivate', function(event, ui) {alert("sortdeactivate")});  //当一个有使用连接的sortable对象结束排序动作时,所有允许的sortable触发此事件。

$( ".column" ).disableSelection();

});

</script>

</head>

<body>

<div class="demo">

<div class="column" id="column_left">

<div class="portlet" title='1_1'>   <div class="portlet-header">Feeds</div>   <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>  </div>    <div class="portlet" title='1_2'>   <div class="portlet-header">News</div>   <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>  </div>

</div>

<div class="column" id="column_center">

<div class="portlet" title="2_1">   <div class="portlet-header">Shopping</div>   <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>  </div>  <div class="portlet" title="2_2">   <div class="portlet-header">Colther</div>   <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>  </div>

</div>

<div class="column" id="column_right">

<div class="portlet" title="3_1">   <div class="portlet-header">Links</div>   <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>  </div>    <div class="portlet" title="3_2">   <div class="portlet-header">Images</div>   <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>  </div>

</div>

</div>

</body>

</html>

---------------------------详细解说----------------------------------------

所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象

ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象

ui.position - 表示相对当前对象,鼠标的坐标值对象{top,left}   ui.offset - 表示相对于当前页面,鼠标的坐标值对象{top,left}

ui.item - 表示当前拖拽的元素   ui.placeholder - 占位符(如果有定义的话)   ui.sender - 当前拖拽元素的所属sortable对象(仅当元素是从另一个sortable对象传递过来时有用)   
·参数(参数名 : 参数类型 : 默认值)

appendTo : String : 'parent' Defines where the helper that moves with the mouse is being appended to during the drag (for example, to resolve overlap/zIndex issues).

初始:$('.selector').sortable({ appendTo: 'body' });

获取:var appendTo = $('.selector').sortable('option', 'appendTo');

设置:$('.selector').sortable('option', 'appendTo', 'body');

axis : String : false    如果有设置,则元素仅能横向或纵向拖动。可选值:'x', 'y'

初始:$('.selector').sortable({ axis: 'x' });

获取:var axis = $('.selector').sortable('option', 'axis');

设置:$('.selector').sortable('option', 'axis', 'x');

cancel : Selector : ':input,button'    阻止排序动作在匹配的元素上发生。

初始:$('.selector').sortable({ cancel: 'button' });

获取:var cancel = $('.selector').sortable('option', 'cancel');

设置:$('.selector').sortable('option', 'cancel', 'button');

connectWith : Selector : false    允许sortable对象连接另一个sortable对象,可将item元素拖拽到另一个中。

初始:$('.selector').sortable({ connectWith: '.otherlist' });

获取:var connectWith = $('.selector').sortable('option', 'connectWith');

设置:$('.selector').sortable('option', 'connectWith', '.otherlist');

containment : Element, String, Selector : false    约束排序动作只能在一个指定的范围内发生。可选值:DOM对象, 'parent', 'document', 'window', 或jQuery对象

初始:$('.selector').sortable({ containment: 'parent' });

获取:var containment = $('.selector').sortable('option', 'containment');

设置:$('.selector').sortable('option', 'containment', 'parent');

cursor : String : 'auto' 定义在开始排序动作时,如果的样式。

初始:$('.selector').sortable({ cursor: 'crosshair' });

获取:var cursor = $('.selector').sortable('option', 'cursor');

设置:$('.selector').sortable('option', 'cursor', 'crosshair');

cursorAt : Object : false    当开始移动时,鼠标定位在的某个位置上(最多两个方向)。可选值:{ top, left, right, bottom }.

初始:$('.selector').sortable({ cursorAt: 'top' });

获取:var cursorAt = $('.selector').sortable('option', 'cursorAt');

设置:$('.selector').sortable('option', 'cursorAt', 'top');

delay : Integer : 0   以毫秒为单位,设置延迟多久才激活排序动作。此参数可防止误点击。

初始:$('.selector').sortable({ delay: 500 });

获取:var delay = $('.selector').sortable('option', 'delay');

设置:$('.selector').sortable('option', 'delay', 500);

distance : Integer : 1   决定至少要在元素上面拖动多少像素后,才正式触发排序动作。

初始:$('.selector').sortable({ distance: 30 });

获取:var distance = $('.selector').sortable('option', 'distance');

设置:$('.selector').sortable('option', 'distance', 30);

dropOnEmpty : Boolean : true    是否允許拖拽到一個空的sortable对象中。

初始:$('.selector').sortable({ dropOnEmpty: false });

获取:var dropOnEmpty = $('.selector').sortable('option', 'dropOnEmpty');

设置:$('.selector').sortable('option', 'dropOnEmpty', false);

forceHelperSize : Boolean : false    If true, forces the helper to have a size.

初始:$('.selector').sortable({ forceHelperSize: true });

获取:var forceHelperSize = $('.selector').sortable('option', 'forceHelperSize');

设置:$('.selector').sortable('option', 'forceHelperSize', true);

forcePlaceholderSize : Boolean : false If true, forces the placeholder to have a size.

初始:$('.selector').sortable({ forcePlaceholderSize: true });

获取:var forcePlaceholderSize = $('.selector').sortable('option', 'forcePlaceholderSize');

设置:$('.selector').sortable('option', 'forcePlaceholderSize', true);

grid : Array : false    将排序对象的item元素视为一个格子处理,每次移动都按一个格子大小移动,数组值:[x,y]

初始:$('.selector').sortable({ grid: [50, 20] });

获取:var grid = $('.selector').sortable('option', 'grid');

设置:$('.selector').sortable('option', 'grid', [50, 20]);

handle : Selector, Element : false    限制排序的动作只能在item元素中的某个元素开始。

初始:$('.selector').sortable({ handle: 'h2' });

获取:var handle = $('.selector').sortable('option', 'handle');

设置:$('.selector').sortable('option', 'handle', 'h2');

helper : String, Function : 'original'    设置是否在拖拽元素时,显示一个辅助的元素。可选值:'original', 'clone'

初始:$('.selector').sortable({ helper: 'clone' });

获取:var helper = $('.selector').sortable('option', 'helper');

设置:$('.selector').sortable('option', 'helper', 'clone');

items : Selector : '> *'    指定在排序对象中,哪些元素是可以进行拖拽排序的。

初始:$('.selector').sortable({ items: 'li' });

获取:var items = $('.selector').sortable('option', 'items');

设置:$('.selector').sortable('option', 'items', 'li');

opacity : Float : false    定义当排序时,辅助元素(helper)显示的透明度。

初始:$('.selector').sortable({ opacity: 0.6 });

获取:var opacity = $('.selector').sortable('option', 'opacity');

设置:$('.selector').sortable('option', 'opacity', 0.6);

placeholderType: StringDefault: false    设置当排序动作发生时,空白占位符的CSS样式。

初始:$('.selector').sortable({ placeholder: 'ui-state-highlight' });

获取:var placeholder = $('.selector').sortable('option', 'placeholder');

设置:$('.selector').sortable('option', 'placeholder', 'ui-state-highlight');

revert : Boolean : false 如果设置成true,则被拖拽的元素在返回新位置时,会有一个动画效果。

初始:$('.selector').sortable({ revert: true });

获取:var revert = $('.selector').sortable('option', 'revert');

设置:$('.selector').sortable('option', 'revert', true);

scroll : Boolean : true 如果设置成true,则元素被拖动到页面边缘时,会自动滚动。

初始:$('.selector').sortable({ scroll: false });

获取:var scroll = $('.selector').sortable('option', 'scroll');

设置:$('.selector').sortable('option', 'scroll', false);

scrollSensitivity : Integer : 20    设置当元素移动至边缘多少像素时,便开始滚动页面。

初始:$('.selector').sortable({ scrollSensitivity: 40 });

获取:var scrollSensitivity = $('.selector').sortable('option', 'scrollSensitivity');

设置:$('.selector').sortable('option', 'scrollSensitivity', 40);

scrollSpeed : Integer : 20   设置页面滚动的速度。

初始:$('.selector').sortable({ scrollSpeed: 40 });

获取:var scrollSpeed = $('.selector').sortable('option', 'scrollSpeed');

设置:$('.selector').sortable('option', 'scrollSpeed', 40);

tolerance : String : 'intersect' 设置当拖动元素越过其它元素多少时便对元素进行重新排序。

可选值:'intersect', 'pointer' intersect:至少重叠50%

pointer:鼠标指针重叠元素

初始:$('.selector').sortable({ tolerance: 'pointer' });

获取:var tolerance = $('.selector').sortable('option', 'tolerance');

设置:$('.selector').sortable('option', 'tolerance', 'pointer');

zIndex : Integer : 1000

设置在排序动作发生时,元素的z-index值。

初始:$('.selector').sortable({ zIndex: 5 });

获取:var zIndex = $('.selector').sortable('option', 'zIndex');

设置:$('.selector').sortable('option', 'zIndex', 5);

·事件  

start

当排序动作开始时触发此事件。

定义:$('.selector').sortable({ start: function(event, ui) { ... } });

绑定:$('.selector').bind('sortstart', function(event, ui) { ... });

sort

当元素发生排序时触发此事件。

定义:$('.selector').sortable({ sort: function(event, ui) { ... } });

绑定:$('.selector').bind('sort', function(event, ui) { ... });

change

当元素发生排序且坐标已发生改变时触发此事件。

定义:$('.selector').sortable({ change: function(event, ui) { ... } });

绑定:$('.selector').bind('sortchange', function(event, ui) { ... });

beforeStop

当排序动作结束之前触发此事件。此时占位符元素和辅助元素仍有效。

定义:$('.selector').sortable({ beforeStop: function(event, ui) { ... } });

绑定:$('.selector').bind('sortbeforeStop', function(event, ui) { ... });

stop

当排序动作结束时触发此事件。

定义:$('.selector').sortable({ stop: function(event, ui) { ... } });

绑定:$('.selector').bind('sortstop', function(event, ui) { ... });

update

当排序动作结束时且元素坐标已经发生改变时触发此事件。

定义:$('.selector').sortable({ update: function(event, ui) { ... } });

绑定:$('.selector').bind('sortupdate', function(event, ui) { ... });

receive

当一个已连接的sortable对象接收到另一个sortable对象的元素后触发此事件。

定义:$('.selector').sortable({ receive: function(event, ui) { ... } });

绑定:$('.selector').bind('sortreceive', function(event, ui) { ... });

over

当一个元素拖拽移入另一个sortable对象后触发此事件。

定义:$('.selector').sortable({ over: function(event, ui) { ... } });

绑定:$('.selector').bind('sortover', function(event, ui) { ... });

out

当一个元素拖拽移出sortable对象移出并进入另一个sortable对象后触发此事件。

定义:$('.selector').sortable({ out: function(event, ui) { ... } });

绑定:$('.selector').bind('sortout', function(event, ui) { ... });

activate

当一个有使用连接的sortable对象开始排序动作时,所有允许的sortable触发此事件。

定义:$('.selector').sortable({ activate: function(event, ui) { ... } });

绑定:$('.selector').bind('sortactivate', function(event, ui) { ... });

deactivate

当一个有使用连接的sortable对象结束排序动作时,所有允许的sortable触发此事件。

定义:$('.selector').sortable({ deactivate: function(event, ui) { ... } });

绑定:$('.selector').bind('sortdeactivate', function(event, ui) { ... });

·方法  

destory   从元素中移除拖拽功能。   用法:.sortable( 'destroy' )   
disable   禁用元素的拖拽功能。   用法:.sortable( 'disable' )   
enable   启用元素的拖拽功能。   用法:.sortable( 'enable' )   
option   获取或设置元素的参数。   用法:.sortable( 'option' , optionName , [value] )   
serialize   获取或设置序列化后的每个item元素的id属性。   用法:.sortable( 'serialize' , [options] )   
toArray   获取序列化后的每个item元素的id属性的数组。   用法:.sortable( 'toArray' )   
refresh   手动重新刷新当前sortable对象的item元素的排序。   用法:.sortable( 'refresh' )   
refreshPositions   手动重新刷新当前sortable对象的item元素的坐标,此方法可能会降低性能。   用法:.sortable( 'refreshPositions' )   
cancel   取消当前sortable对象中item元素的排序改变。   用法:.sortable( 'cancel' )

排序后保存有两种方法,

一是cookie,二是数据库配置文件等。

这个是cookie  的例子 大家可以参考 http://www.cnblogs.com/tianxiangbing/archive/2010/01/26/jquery_sortable.html
下面是数据库的部分代码 原作:

$(function() {

  var show = $(".loader");

  var orderlist = $(".orderlist");

  var listleft = $("div[id = 'column_left']");

  var listcenter = $("div[id = 'column_center']");

  var listright = $("div[id = 'column_right']");

   $( ".column" ).sortable({

    opacity: 0.5,//拖动的透明度

    revert: true, //缓冲效果

    cursor: 'move', //拖动的时候鼠标样式

    connectWith: ".column",

    //开始用update 结果执行两次,浪费资源,古改成stop

    //但是stop在元素没有改变位置的时候也会执行,

    //用update其他js会有问题,^_^

     stop: function(){

      var new_order_left = []; //左栏布局

      var new_order_center = [];//中栏布局

       var new_order_right = [];//右栏布局

        listleft.children(".portlet").each(function() {        new_order_left.push(this.title);              });

        listcenter.children(".portlet").each(function() {                 new_order_center.push(this.title);              });

      listright.children(".portlet").each(function() {                 new_order_right.push(this.title);              });

     var newleftid = new_order_left.join(',');

           var newcenterid = new_order_center.join(',');

     var newrightid = new_order_right.join(',');

      $.ajax({

         type: "post",

        url: jsonUrl, //服务端处理程序

         data: { leftid: newleftid, centerid: newcenterid, rightid:newrightid},   //id:新的排列对应的ID,order:原排列顺序 //

        beforeSend: function() { //                    show.html(" 正在更新"); //               },

        success: function(msg) {                     //alert(msg);                     show.html("");                }

        });

    }

});

文章出处:http://www.cnblogs.com/liyuxin/archive/2011/11/14/2248161.html

Jquery.Sorttable 桌面拖拽自定义的更多相关文章

  1. JQuery UI的拖拽功能

    JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互.动画.特效等API,并且封装了一些Web小部件(Widget).同时,JQuery UI继承了jquery的插件支持,有大量 ...

  2. JQuery UI的拖拽功能实现方法小结

    JQuery UI提供的API极大简化了拖拽功能的开发.只需要分别在拖拽源(source)和目标(target)上调用draggable和droppable两个函数即可. 拖拽原理 首先要明确几个概念 ...

  3. jQuery插件(拖拽)

    拖曳插件draggable的功能是拖动被绑定的元素,当这个jQuery UI插件与元素绑定后,可以通过调用draggable()方法,实现各种拖曳元素的效果,调用格式如下: $(selector). ...

  4. jquery实现可拖拽的div

    由于项目中并未引入前端开发框架easyui.ext.没有现成的控件可以使用,今天时间算是充裕的时候,自己写了一个可以拖拽.放大缩小的例子.欢迎大家指正. 不啰嗦,上代码: 依赖的文件:jquery.j ...

  5. jquery插件之拖拽改变元素大小

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽改变元素大小的效果,您可以根据自己的实际需求来设置被 ...

  6. jquery插件之拖拽

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽效果,您可以根据自己的实际需求来设置被拖拽元素是否可 ...

  7. jQuery网页元素拖拽插件

    效果说明:配合已有CSS样式,载入插件后,网页元素可以随意在窗口内拖拽,设置了原位置半透明和拖拽半透明的效果选项,可根据需要选择.另外,当页面上有多个可拖拽元素时,可以载入另外一个用于设置z-inde ...

  8. jquery 实现页面拖拽并保存到cookie

    实现的效果就是页面内的图片可拖拽到任意位置,并将所在位置保存.下次打开页面依然可见.本文是作demo用,实际开发中,位置的数据应保存到数据库中. 好了,开始. 1.准备工作. a.jquery(1.7 ...

  9. jQuery内容横向拖拽滚动

    如果有业务需求:使用横向滚动,而又不想用滚动条,可以使用横向拖拽滚动,主要是利用元素的scrollLeft特性: 废话不多说直接上代码: css: .box{ width:100%; height:3 ...

随机推荐

  1. 延迟加载并渐现内容的jquery插件lazyFade

    http://www.jqcool.net/demo/201412/jquery-lazyfade/

  2. 探究Android SQLite3多线程

    最近做项目时在多线程读写数据库时抛出了异常,这自然是我对SQlite3有理解不到位的地方,所以事后仔细探究了一番. 关于getWriteableDataBase()和getReadableDataba ...

  3. UVA1152 4Values whose Sum is 0

    Description The SUM problem can be formulated as follows: given four lists A, B, C, D of integer val ...

  4. 百度地图LBS云平台读写数据操作类

    最近写了个叫<行踪记录仪>的手机软件,用了百度云来记录每个用户的最近位置,以便各用户能在地图上找到附近的人,为此写了个类来读写数据,大致如下: import java.util.Array ...

  5. 一】Maven入门

    一.简单pom.xml配置文件解析 <?xml version="1.0" encoding = "utf-8"?> <project xml ...

  6. MySQL AB复制

    http://tonychiu.blog.51cto.com/656605/326541

  7. SlidingMenu和ActionBarSherlock结合滑动式菜单都

    https://github.com/jfeinstein10/SlidingMenu http://actionbarsherlock.com/ SlidingMenu 的demo工程引用了Acti ...

  8. 全表扫描引发的db file sequential read

    今天我要做一个SQL调优,监控该SQL, 利用ASH 监控 该SQL是在sid=4848 上面跑的 db file sequential read等待事件有3个参数:file#,first block ...

  9. HDU 1045 Fire Net(图匹配)

    题目大意: 这个是以前做过的一道DFS题目,当时是完全暴力写的. 给你一个N代表是N*N的矩阵,矩阵内 ‘X’代表墙, ‘.’代表通道. 问这个矩阵内最多可以放几个碉堡, 碉堡不能在同一行或者同一列, ...

  10. Ubuntu中Samba的安装配置和使用[图文]

    Samba服务在Ubuntu服务器版本中默认并没有安装. 1. Samba软件包的安装 使用源安装,在终端中输入如下命令: #sudo apt-get install samba#sudo apt-g ...