他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)* draggable - jQuery EasyUI
* Licensed under the GPL:
http://www.gnu.org/licenses/gpl.txt
* Copyright 2010 stworthy [
(function($){
//预存移动变量方法
function drag(e){
var opts = $.data(e.data.target, 'draggable').
//中间变量
var dragData = e.
//拖动后的left=原先的left+拖动位移
var left = dragData.startLeft + e.pageX - dragData.startX;
var top = dragData.startTop + e.pageY - dragData.startY;
if (opts.deltaX != null && opts.deltaX != undefined){
left = e.pageX + opts.deltaX;//如果有点击位移，左坐标直接等于鼠标位置+偏移
if (opts.deltaY != null && opts.deltaY != undefined){
top = e.pageY + opts.deltaY;
//如果拖动对象有父对象，对于计算出来的left和top要加上父对象的left和top
if (e.data.parnet != document.body) {
if ($.boxModel == true) {//只针对盒子模型进行设置
left += $(e.data.parent).scrollLeft();
top += $(e.data.parent).scrollTop();
if (opts.axis == 'h') {//如果是水平拖动 则只改left
dragData.left =
} else if (opts.axis == 'v') {//如果是垂直，则只改top
dragData.top =
dragData.left =
dragData.top =
//实现位移变化的函数
function applyDrag(e){
var opts = $.data(e.data.target, 'draggable').
var proxy = $.data(e.data.target, 'draggable').//获取拖动对象的proxy对象,proxy就是我们在拖动时候随鼠标移动的对象
if (proxy){
proxy.css('cursor', opts.cursor);
proxy = $(e.data.target);
$.data(e.data.target, 'draggable').handle.css('cursor', opts.cursor);
proxy.css({//最主要方法，该方法使得对象被拖动
left:e.data.left,
top:e.data.top
//3按下鼠标时候执行的方法
function doDown(e){
var opts = $.data(e.data.target, 'draggable').//获取拖动对象中option配置信息
//拖和放是对应的，现在来设置放对象
var droppables = $('.droppable').filter(function(){//如果放对象和托对象是一个对象，则不拖动
return e.data.target !=
}).filter(function(){//如何不是同一个对象
var accept = $.data(this, 'droppable').options.
if (accept){//如果目标地设置了接收对象，则只有符合接收条件的对象才能被拖进来
return $(accept).filter(function(){
return this == e.data.
}).length & 0; //只要有一个匹配就ok了
//如果目标地，没设置接受对象，则所有对象都可以被拖进来。
$.data(e.data.target, 'draggable').droppables =
var proxy = $.data(e.data.target, 'draggable').//获取拖动对象的proxy对象,proxy就是我们在拖动时候随鼠标移动的对象
if (!proxy){//如果没有专门配置一个proxy
if (opts.proxy){//看看option中是否有proxy,如果有
if (opts.proxy == 'clone'){//proxy为'clone'
proxy = $(e.data.target).clone().insertAfter(e.data.target);//复制当前dom,并查到当前dom后面
proxy = opts.proxy.call(e.data.target, e.data.target);//如果为一个函数，则调用这个函数返回值
$.data(e.data.target, 'draggable').proxy =//同事把opts.里面的proxy协会到拖动对象的draggable缓存配置里面去。
} else {//如果哪里都没有的话
proxy = $(e.data.target);//proxy对象就是本身了
proxy.css('position', 'absolute');//因为是拖动，所以要absolute
//开始拖动，改变拖动对象的一些属性值，放在中间变量中
//将对象的属性值进行更新，实现拖动效果
applyDrag(e);
//调用开始拖动函数
opts.onStartDrag.call(e.data.target, e);
//移动事件注册方法
function doMove(e){
if ($.data(e.data.target, 'draggable').options.onDrag.call(e.data.target, e) != false){
applyDrag(e);
var source = e.data.
$.data(e.data.target, 'draggable').droppables.each(function(){
var dropObj = $(this);
var p2 = $(this).offset();
if (e.pageX & p2.left && e.pageX & p2.left + dropObj.outerWidth()//判断是否已经拖动到目标区域内
&& e.pageY & p2.top && e.pageY & p2.top + dropObj.outerHeight()){
if (!this.entered){ //触发移进事件，并设置移动标志量
$(this).trigger('_dragenter', [source]);
this.entered =
$(this).trigger('_dragover', [source]);//触发目标对象的over事件
if (this.entered){//否则在判断下是否是从目标对象内移除，并设置标志量
$(this).trigger('_dragleave', [source]);
this.entered =
function doUp(e){
var proxy = $.data(e.data.target, 'draggable').
var opts = $.data(e.data.target, 'draggable').
if (opts.revert){
if (checkDrop() == true){//如果进入了目标对象
removeProxy();
$(e.data.target).css({
position:e.data.startPosition,
left:e.data.startLeft,
top:e.data.startTop
if (proxy){
proxy.animate({
left:e.data.startLeft,
top:e.data.startTop
}, function(){
removeProxy();
$(e.data.target).animate({
left:e.data.startLeft,
top:e.data.startTop
}, function(){
$(e.data.target).css('position', e.data.startPosition);
} else {//如果没有reverte设置，直接修改拖动dom的位置即可。
$(e.data.target).css({
position:'absolute',
left:e.data.left,
top:e.data.top
removeProxy();//移除proxy对象
checkDrop();
opts.onStopDrag.call(e.data.target, e);
function removeProxy(){
if (proxy){
proxy.remove();
$.data(e.data.target, 'draggable').proxy =
//该方法检验是否将对象拖动到目标对象内，如果拖动进去了，触发目标对象的_drop事件，并设置进入标志。
function checkDrop(){
var dropped =
//对drop对象进行遍历操作
$.data(e.data.target, 'draggable').droppables.each(function(){
var dropObj = $(this);
var p2 = $(this).offset();
if (e.pageX & p2.left && e.pageX & p2.left + dropObj.outerWidth()//如果移进了一个目标对象
&& e.pageY & p2.top && e.pageY & p2.top + dropObj.outerHeight()){
if (opts.revert){//如果revert是true,就会还原
$(e.data.target).css({
position:e.data.startPosition,
left:e.data.startLeft,
top:e.data.startTop
$(this).trigger('_drop', [e.data.target]);
this.entered =
$(document).unbind('.draggable');//接触document上的事件，否则移动结束后，元素还是会变位置的
//1，注册draggable方法到$()上
$.fn.draggable = function(options){
if (typeof options == 'string'){//option为字符串的时候，进行处理
switch(options){
case 'options':
return $.data(this[0], 'draggable').//为option,实际是获取,该对象缓存数据中名为draggable中的options对象,可以参考jquery $data()方法
case 'proxy':
return $.data(this[0], 'draggable').//获取缓存中的proxy
case 'enable'://执行禁止拖动操作。
return this.each(function(){
$(this).draggable({disabled:false});
case 'disable'://允许拖动
return this.each(function(){
$(this).draggable({disabled:true});
return this.each(function(){ //通过调用$().draggable()方法来实现拖动
$(this).css('position','absolute');
var state = $.data(this, 'draggable');//获取对象上在缓存中存放的draggable对象，首次肯定为空
if (state) {
state.handle.unbind('.draggable');
opts = $.extend(state.options, options);
opts = $.extend({}, $.fn.draggable.defaults, options || {});//合并配置参数，来源为默认配置+传递进来的参数
if (opts.disabled == true) {
//如果参数中含有禁止拖动的配置，则返回
$(this).css('cursor', 'default');
var handle =
//handle是实际触发拖动的对象
if (typeof opts.handle == 'undefined' || opts.handle == null){
handle = $(this);
//handle为空，则默认为调用对象数组中本身的子元素
handle = (typeof opts.handle == 'string' ? $(opts.handle, this) : handle);//如果为字符串，包装成本身jquery对象和本身两个对象。
$.data(this, 'draggable', {
//把opts信息更新到子元素的缓存中的draggable对象中
options: opts,
handle: handle
// bind mouse event using event namespace draggable
handle.bind('mousedown.draggable', {target:this}, onMouseDown); //注册拖动对象的mousedown事件，后面的.draggable是为事件注册一个命名空间，好处是unbind(.draggable)=unbind(.mousedown)+unbind(.mouseover)
handle.bind('mousemove.draggable', {target:this}, onMouseMove);//注册鼠标滑动事件
//注意this代表的是$()元素中的每一个子dom元素
function onMouseDown(e) {
if (checkArea(e) == false)
var position = $(e.data.target).position();//获取被拖动元素的top 和left
var data = {
//封装data 对象，记录width,height,pageX,pageY,left 和top是为了方便计算拖动后的位置
startPosition: $(e.data.target).css('position'), //absolute
or relative or active
startLeft: position.left,
startTop: position.top,
left: position.left,
top: position.top,
startX: e.pageX, //鼠标点击时的x坐标
startY: e.pageY, //鼠标点击时的y坐标
target: e.data.target, //子dom
parent: $(e.data.target).parent()[0] //拖动对象的父dom
$(document).bind('mousedown.draggable', data, doDown); //在document上绑定三个鼠标事件。根据事件的下传特性，当在目标对象上执行drap.就会触发document上的drap.
$(document).bind('mousemove.draggable', data, doMove); //以下主要分析doDown,doMove 和doUp的实现过程
$(document).bind('mouseup.draggable', data, doUp);
function onMouseMove(e) {
//move事件主要是当鼠标移动到可以拖拽元素上，鼠标形状进行改变
if (checkArea(e)){
$(this).css('cursor', opts.cursor);
$(this).css('cursor', 'default');
// check if the handle can be dragged
判断鼠标拖动点，离handle的四面八方是否小于设置的adge,如果有一边小于则不拖动
function checkArea(e) {
var offset = $(handle).offset();
var width = $(handle).outerWidth();
var height = $(handle).outerHeight();
var t = e.pageY - offset.
var r = offset.left + width - e.pageX;
var b = offset.top + height - e.pageY;
var l = e.pageX - offset.
return Math.min(t,r,b,l) & opts.
$.fn.draggable.defaults = {
//2默认配置信息
proxy:null, // 'clone' or a function that will create the proxy object,
// the function has the source parameter that indicate the source object dragged.
revert:false,//该属性是设置拖动后自动还原效果，试一下就知道了
cursor:'move',
deltaX:null,//鼠标点击拖动对象时候，proxy的位移，称作德尔塔
deltaY:null,
handle: null,
disabled: false,
axis:null, // v or h
水平还是垂直方向拖动
onStartDrag: function(e){},
onDrag: function(e){},
onStopDrag: function(e){}
})(jQuery);
下载次数: 49
下载次数: 24
浏览: 42755 次
来自: 杭州
很不错。嘿嘿
块级元素不会变成行内元素
“最好下一番功夫在ec-262-3上”，问下，这个ec-262 ...
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'&script language="JavaScript" type="text/javascript" src="ui/jquery-1.8.2.js"&&/script&
&script language="JavaScript" type="text/javascript" src="ui/jquery-ui-1.9.1.custom.js"&&/script&
&!--&script language="JavaScript" type="text/javascript" src="ui/jquery.ui.datepicker-zh-CN.js"&&/script&--&
&link rel="stylesheet" type="text/css" href="ui/jquery-ui-1.9.1.custom.css"&
&!--==============================draggable===========================--&
&!--==================================================================--&
&input type="button" value="draggable_fun" onclick="draggable_fun();" /&
&div id="draggable_div" class="ui-widget-content"&&!--将想要可拖拽的部分用div括起来，也可以用其他网页标签括起来，被括起来的地方可添加任意内容--&
&p&Drag me around&/p&
i can fly!
&script language="JavaScript" type="text/javascript"&
$("#draggable_div").draggable({
//=================属性
addClasses
//如果设置成false，将在加载时阻止ui-draggable样式的加载。当有很多对象要加载draggable()插件的情况下，这将对性能有极大的优化。默认值
: "parent",
//用来指定控件在拖拽过程中ui.helper的容器, 默认情况下, ui.helper使用和初始定义的draggable相同的容器, 也就是其父元素.默认值
//约束拖拽的动作只能在X轴或Y轴上执行，可选值："数值", "数值"。默认值
: "input",
//防止在指定的对象上开始拖拽可用JQuery选择器写法来指定。默认值
"input,textarea,button,select,option"
connectToSortable
//允许draggable被拖拽到指定的sortables中可用JQuery选择器写法来指定，如果使用此选项helper属性必须设置成clone才能正常工作。默认值
containment
//强制draggable只允许在指定元素或区域的范围内移动，可选值："parent", "document", "window", [ 数值, 数值, 数值, 数值 ].默认值
//指定在做拖拽动作时，鼠标的CSS样式。默认值
//当开始移动时，鼠标定位在的某个位置上（最多两个方向）。可选值：{ top, left, right, bottom }.默认值
//当鼠标点下后，延迟指定时间后才开始激活拖拽动作（单位：毫秒）。此选项可以用来防止不想要的拖累元素时的误点击。默认值
//如果设成true则draggable实例不能使用。默认值
//当鼠标点下后，只有移动指定像素后才开始激活拖拽动作。默认值
//拖拽元素时，只能以指定大小的方格进行拖拽。可选值： [数值,数值] 默认值
//限制只能在拖拽元素内的指定元素开始拖拽，可用JQuery选择器写法来指定。默认值
: "original",
//拖拽元素时的显示方式。（如果是函数，必须返回值是一个DOM元素）可选值："original", "clone", Function默认值
"original"
//可防止当mouseover事件触发拖拽动作时，移动过iframes并捕获到它（内部内容），如果设置成true，则屏蔽层会覆盖页面的iframe。如果设置成对应的选择器，则屏蔽层会覆盖相匹配的iframe。默认值
//当元素开始拖拽时，改变元素的透明度。默认值
refreshPositions
//如果设置成true，所有移动过程中的坐标都会被记录。（注意：此功能将影响性能）默认值
//当元素拖拽结束后，元素回到原来的位置。默认值
revertDuration
//当元素拖拽结束后，元素回到原来的位置的时间。（单位：毫秒）默认值
: "default",
//设置元素只允许拖拽到具有相同scope值的元素。默认值
//如果设置为true，元素拖拽至边缘时，父容器将自动滚动。默认值
scrollSensitivity
//当元素拖拽至边缘时，父窗口一次滚动的像素。默认值
scrollSpeed
//当元素拖拽至边缘时，父窗口滚动的速度。默认值
//当设置为true或元素标签时，元素拖拽到其它元素的边缘时，会自动吸附其它元素。默认值
//确定拖拽的元素吸附的模式。可选值："inner", "outer", "both"默认值
snapTolerance
//确定拖拽的元素移动至其它元素多少像素的距离时，发生吸附的动作。默认值
//控制匹配元素的z-index值，使当前拖拽的对象始终在匹配元素之前，而且似乎要控制匹配的元素只能以其HTML标签名来匹配.默认值
//控制当拖拽元素时，改变元素的z-index值。默认值
//=================事件
: function(event, ui){
//当创建draggable时触发
//alert("this is create");
: function(event, ui){
//当鼠标开始拖拽时，触发此事件。
//alert("this is start");
: function(event, ui){
//当鼠标拖拽移动时，触发此事件。
//alert("this is drag");
: function(event, ui){
//当移动结束鼠标松开时，触发此事件。
//alert("this is stop");
function draggable_fun(){
//=================方法
//$( "#draggable_div" ).draggable("destroy");
//从元素中移除拖拽功能。
$( "#draggable_div" ).draggable("disable");
//禁用元素的拖拽功能。
$( "#draggable_div" ).draggable("enable");
//启用元素的拖拽功能。
$( "#draggable_div" ).draggable("option","disabled",false);//为指定属性赋值，第二参数为draggable的一个属性名，第三参数为可以为该属性赋的值
$( "#draggable_div" ).draggable("option","disabled");
//获取指定属性的值，第二参数为draggable的一个属性名
$( "#draggable_div" ).draggable("widget");
//返回该可拖拽元素的JQuery对象
&!--==============================droppable===========================--&
&!--==================================================================--&
&input type="button" value="droppable_fun" onclick="droppable_fun();" /&
&div id="droppable_div" class="ui-widget-content"&&!--将想要可拖放的部分用div括起来，也可以用其他网页标签括起来，被括起来的地方可添加任意内容--&
&p&Drop here&/p&
&script language="JavaScript" type="text/javascript"&
$("#droppable_div").droppable({
//=================属性
//仅允许符合JQuery选择器的元素激活拖放的事件。（如果是函数，则此函数会在页面上所有元素被调用，函数的返回值必须是布尔值。）默认值
activeClass
: "ui-state-highlight",
//如果设置值，则当有拖拽事件发生时，为页面上所有允许（accept）的元素添加此样式。默认值
addClasses
//设置为false，可以阻止ui-droppable样式添加至可拖放的对象。（这样可以获取一定的性能优化） 默认值
//如果设成true则droppable实例不能使用。默认值
//是否防止嵌套的droppable事件被传播。默认值
hoverClass
: "drop-hover",
//当拖拽元素移至带有可拖放插件的元素上时，为元素添加指定的样式。默认值
: "default",
//设置元素只允许具有相同scope值拖拽元素激活此拖放元素。默认值
: "touch",
/*判断一个可拖拽元素被“放到”一个可拖放元素的判断模式。（可选值："fit", "intersect", "pointer", "touch"）默认值
"intersect"
fit：拖拽元素完全覆盖拖放元素
intersect：拖拽元素至少50%覆盖拖放元素
pointer：鼠标指针重叠在可拖放元素上
touch：只要有任何重叠即发生
//=================事件
: function(event, ui) {
//当创建droppable时触发
//alert("this is create");
: function(event, ui) {
//当任何可拖拽元素开始拖拽动作时激活此事件。
//alert("this is activate");
deactivate
: function(event, ui) {
//当任何可拖拽元素停止拖拽动作时激活此事件。
//alert("this is deactivate");
: function(event, ui) {
//当一个被允许（accept）的可拖拽元素移动并覆盖可拖放元素时激活。
//alert("this is over");
out: function(event, ui) {
//当一个被允许（accept）的可拖拽元素移出可拖放元素时激活。
//alert("this is out");
drop: function(event, ui) {
//当一个被允许（accept）的可拖拽元素移动并覆盖可拖放元素，松开鼠标时激活。
//alert("this is drop");
function droppable_fun(){
//=================方法
//$( "#droppable_div" ).droppable("destroy");
//从元素中移除拖放功能。
$( "#droppable_div" ).droppable("disable");
//禁用元素的拖放功能。
$( "#droppable_div" ).droppable("enable");
//启用元素的拖放功能。
$( "#droppable_div" ).droppable("option","disabled",false);
//为指定属性赋值，第二参数为droppable的一个属性名，第三参数为可以为该属性赋的值
$( "#droppable_div" ).droppable("option","disabled");
//获取指定属性的值，第二参数为droppable的一个属性名
$( "#droppable_div" ).droppable("widget");
//返回该可拖放元素的JQuery对象
&!--==============================resizable===========================--&
&!--==================================================================--&
&input type="button" value="resizable_fun" onclick="resizable_fun();" /&
&div id="resizable_div" class="ui-widget-content"&
&h3 class="ui-widget-header"&Resizable&/h3&
&script language="JavaScript" type="text/javascript"&
$("#resizable_div").resizable({
//=================属性
alsoResize
//当调整元素大小时，同步改变符合JQuery选择器的另一个（或一组）元素的大小。默认值
//在调整元素大小结束之后是否显示动画默认值
animateDuration
//动画效果的持续时间。（单位：毫秒）可选值："slow" , "normal" , "fast" 默认值
animateEasing
: "easeOutBounce",
//选择何种动画效果。默认值
aspectRatio
//如果设置为true，则元素的可调整尺寸受原来高宽比的限制。例如：9 / 16, or 0.5 默认值
//如果设置为true，则默认隐藏掉可调整大小的手柄，除非鼠标移至元素上。默认值
: "input,textarea,button,select,option",
//阻止resizable插件加载在与你匹配的元素上。默认值
"input,textarea,button,select,option"
containment
//控制元素只能在某一个元素的大小之内改变。允许值："parent" , "document" , DOM元素 , 或一个选择器。默认值
//以毫秒为单位，当发生鼠标点击手柄改变大小，延迟多少毫秒后才激活事件。默认值
//如果设成true则resizable实例不能使用。默认值
//以像素为单位，当发生鼠标点击手柄改变大小，延迟多少像素后才激活事件。默认值
//如果设置为true，则在调整元素大小时，有一个半透明的辅助对象显示。默认值
//设置元素调整的大小随网格变化，允许的数据为数组：[数值,数值]。默认值
: "e, s, se",
//设置resizable插件允许生成在元素的哪个边上，可选值：n, e, s, w, ne, se, sw, nw, all。默认值
"e, s, se"
: "resizable-helper",
//一个CSS类，当调整元素大小时，将被添加到辅助元素中，一但调整结束则恢复正常。默认值
//设置允许元素调整的最大高度。默认值
//设置允许元素调整的最大宽度。默认值
//设置允许元素调整的最小高度。默认值
//设置允许元素调整的最小宽度。默认值
//=================事件
: function(event, ui) {
//当创建resizable时触发
//alert("this is create");
: function(event, ui) {
//当元素调整动作开始时触发。
//alert("this is start");
: function(event, ui) {
//当元素调整动作过程中触发。
//alert("this is resize");
: function(event, ui) {
//当元素调整动作结束时触发。
//alert("this is stop");
function resizable_fun(){
//=================方法
//$("#resizable_div").resizable("destroy");
//从元素中移除缩放功能。
$("#resizable_div").resizable("disable");
//禁用元素的缩放功能。
$("#resizable_div").resizable("enable");
//开启元素的缩放功能。
$("#resizable_div").resizable("option","disabled",false); //为指定属性赋值，第二参数为resizable的一个属性名，第三参数为可以为该属性赋的值
$("#resizable_div").resizable("option","disabled");
//获取指定属性的值，第二参数为resizable的一个属性名
$("#resizable_div").resizable("widget");
//返回该可缩放元素的JQuery对象
&!--==============================selectable==========================--&
&!--==================================================================--&
创建多选实例前必须至少先指定两个css类的背景色 .ui-selecting .ui-selected 分别是在可选元素被选择时，和选定后添加的css类
并且为了灵活定义多个可多选部分不同的样式，在定义该css类时最好加上所属作用范围这里是#selectable_div
#selectable_div .ui-selecting { background: #FECA40; }/*选择某个项目时添加该css类*/
#selectable_div .ui-selected { background: #F39814;
}/*选定了某个项目时添加该css类*/
/*这个样式类则显得不那么重要了，可以不设定，可被多选的元素将添加该css类*/
.ui-selectee { background:
&input type="button" value="selectable_fun" onclick="selectable_fun();" /&
&!--通过按 Ctrl 可以点击选择多项--&
&div id="selectable_div"&
&div class="ui-widget-content"&Item 1&/div&
&div class="ui-widget-content"&Item 2&/div&
&div class="ui-widget-content"&Item 3&/div&
&div class="ui-widget-content"&Item 4&/div&
&div class="ui-widget-content"&Item 5&/div&
&div class="ui-widget-content"&Item 6&/div&
&div class="ui-widget-content"&Item 7&/div&
&div class="ui-widget-content"&Item 8&/div&
&div class="ui-widget-content"&Item 9&/div&
&script language="JavaScript" type="text/javascript"&
$("#selectable_div").selectable({
//=================属性
//指定选择过程中将辅助元素追加到何处。默认值
autoRefresh
//决定是否在每次选择动作时，都重新计算每个选择元素的坐标和大小。如果你有很多个选择项的话，建议设置成false并通过方法手动刷新。默认值
: "textarea,button,select,option",
//防止在与选择器相匹配的元素上发生选择动作。默认值
"input,textarea,button,select,option"
//以毫秒为单位，设置延迟多久才激活选择动作。此参数可防止误点击。默认值
//如果选择true则该selectable实例将不能使用。默认值
//决定至少要在元素上面拖动多少像素后，才正式触发选择的动作。默认值
//设置哪些子元素才可以被选择。默认值
: "touch",
//可选值："touch", "fit"，分别代表完全和部署覆盖元素即触发选择动作。默认值
//=================事件
:function(event, ui) {
//alert("this is create");
//当创建selectable时触发
:function(event, ui) {
//当选定某一个元素后触发此事件。
//alert("this is selected");
:function(event, ui) {
//当选择某一个元素中时触发此事件。
//alert("this is selecting");
:function(event, ui) {
//当选择一个元素前触发此事件。
//alert("this is start");
:function(event, ui) {
//当选定一个元素结束时触发此事件。
//alert("this is stop");
unselected
:function(event, ui) {
//当取消选定某一个元素后触发此事件。
//alert("this is unselected");
unselecting
:function(event, ui) {
//当取消选定某一个元素中触发此事件。
//alert("this is unselecting");
function selectable_fun(){
//=================方法
//$("#selectable_div").selectable("destroy");
//销毁元素多选功能实例
$("#selectable_div").selectable("disable");
//禁用元素的多选功能。
$("#selectable_div").selectable("enable");
//启用元素的多选功能。
$("#selectable_div").selectable("option","disabled",true);//为指定属性赋值，第二参数为selectable的一个属性名，第三参数为可以为该属性赋的值
$("#selectable_div").selectable("option","disabled");
//获取指定属性的值，第二参数为selectable的一个属性名
$("#selectable_div").selectable("refresh");
//用于手动刷新、重新计算每个选中元素的位置和大小。当autoRefresh设置成false，此方法对于刷新大量选中项非常有用。
$("#selectable_div").selectable("widget");
//返回该可多选元素的JQuery对象
&!--==============================sortable============================--&
&!--==================================================================--&
&input type="button" value="sortable_fun" onclick="sortable_fun();" /&
&div id="sortable_div"&
&div class="ui-state-default"&Item 1&/div&
&div class="ui-state-default"&Item 2&/div&
&div class="ui-state-default"&Item 3&/div&
&div class="ui-state-default"&Item 4&/div&
&div class="ui-state-default"&Item 5&/div&
&div class="ui-state-default"&Item 6&/div&
&div class="ui-state-default"&Item 7&/div&
&script language="JavaScript" type="text/javascript"&
$("#sortable_div").sortable({
//=================属性
: "parent",
//指定排序过程中将辅助元素追加到何处。默认值
//指定条目的拖动方向。可选值："x", "y"。默认值
: ":input,button",
//指定禁止排序的元素。默认值
":input,button"
connectWith
//允许排序列表连接另一个排序列表，将条目拖动至另一个列表中去，可用JQuery选择器形式。默认值
containment
//约束排序动作只能在一个指定的范围内发生。可选值：DOM对象, "parent", "document", "window", 或jQuery对象。默认值
//指定排序时鼠标的CSS样式。默认值
//指定拖动条目时，光标出现的位置，取值是对象，可以包含top、left、right、Bottom属性中的一个或两个。 默认值 false
//以毫秒为单位，设置延迟多久才激活排序动作。此参数可防止误点击。默认值
//当设为true时该排序实例将不可用。默认值
//决定至少要在元素上面拖动多少像素后，才正式触发排序动作。默认值
dropOnEmpty
//是否允許拖拽到一個空列表的sortable对象中。默认值
forceHelperSize
//是否强制辅助元素具有尺寸。默认值
forcePlaceholderSize
//是否强制占有符具有尺寸。默认值
: [ 20, 10 ],
//使条目或辅助元素对齐网格，取值为数组 [数值,数值] 分别表示网格的宽度和高度。默认值
//指定条目的拖动手柄，可用JQuery选择器形式。默认值
: "original",
//指定显示的辅助元素，可选值："original"或"clone"，若为函数则函数返回一个DOM元素。默认值
"original"
//指定列表中可以排序的条目。默认值
//指定辅助元素的不透明度0.01~1。默认值
placeholder
: "sortable-placeholder",
//指定排序时，空白占位的CSS样式。默认值
//是否支持动画效果，或指定动画毫秒数。默认值
//是否元素拖动到边缘时自动滚动。默认值
scrollSensitivity
//指定元素拖动到距离边缘多少像素时开始滚动。默认值
scrollSpeed
//指定滚动的速度。默认值
: "intersect",
//设置拖动元素拖动多少距离时开始排序，可选值："intersect"和"pointer"，前者表示重叠50%，后者表示重叠。默认值
"intersect"
//指定辅助元素的z-Index值。默认值
//=================事件
:function(event, ui) {
//当创建sortable实例时触发
//alert("this is create");
:function(event, ui) {
//当开始排序时触发
//alert("this is start");
:function(event, ui) {
//当排序期间触发
//alert("this is sort");
:function(event, ui) {
//当元素发生排序且坐标已发生改变时触发此事件。
//alert("this is change");
beforeStop
:function(event, ui) {
//当排序动作结束之前触发此事件。此时占位符元素和辅助元素仍有效。
//alert("this is beforeStop");
:function(event, ui) {
//排序动作结束时触发此事件。
//alert("this is stop");
:function(event, ui) {
//当排序动作结束时且元素坐标已经发生改变时触发此事件。
//alert("this is update");
:function(event, ui) {
//当一个已连接的sortable对象接收到另一个sortable对象的元素后触发此事件。
//alert("this is receive");
:function(event, ui) {
//当一个元素从一个sortable对象拖了出来，并进入另一个sortable对象时触发
//alert("this is remove");
:function(event, ui) {
//当一个元素拖拽移动时覆盖其他元素位置时触发此事件。
//alert("this is over");
:function(event, ui) {
//当一个元素拖拽移出原位置并再次确定位置后，或移动超出sortable对象位置范围时触发此事件。
//alert("this is out");
:function(event, ui) {
//当一个sortable对象开始排序动作时，该事件关联到所有与该实例连接着的排序列表。
//alert("this is activate");
deactivate
:function(event, ui) {
//当排序停止后触发，该事件关联到所有与该实例连接着的排序列表
//alert("this is deactivate");
function sortable_fun(){
//=================方法
$("#sortable_div").sortable( "cancel" );
//取消当前sortable对象中item元素的排序改变。
//$("#sortable_div").sortable( "destroy" );
//销毁该sortable对象。
$("#sortable_div").sortable( "disable" );
//禁用该sortable对象排序功能
$("#sortable_div").sortable( "enable" );
//开启该sortable对象排序功能
$("#sortable_div").sortable( "option" , "disabled" , false );
//为指定属性赋值，第二参数为sortable的一个属性名，第三参数为可以为该属性赋的值
$("#sortable_div").sortable( "option" , "disabled" );
//获取指定属性的值，第二参数为sortable的一个属性名
$("#sortable_div").sortable( "refresh" );
//刷新排序的元素。触发重新加载的所有排序的元素，使新元素可用。
$("#sortable_div").sortable( "refreshPositions" );
//刷新排序条目的缓存位置
$("#sortable_div").sortable( "serialize", { key: "sort" } );
//将项目ID排序成一个form或ajax的提交字符串，提交时key对应的值相当表单中的元素名，调用此方法产生的哈希值，可以附加到任何URL
$("#sortable_div").sortable( "toArray" );
//将排序的条目id序列化成字符串数组
$("#sortable_div").sortable( "widget" );
//返回该排序的JQuery对象
chao3344happy
浏览: 14528 次
来自: 上海
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'