菜单

jquery实现的鼠标拖动排序Li或Table,function的正确书写方法

2019年8月2日 - 前端排行

jQuery 正确的书写格式:
引入:<script src=”/libs/jquery/jquery.js”
type=”text/javascript”></script>
html写法:

},

复制代码 代码如下:

_mouseDistanceMet: function(event) {
return (Math.max(
Math.abs(this._mouseDownEvent.pageX – event.pageX),
Math.abs(this._mouseDownEvent.pageY – event.pageY)
) >= this.options.distance
);
},

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html;
charset=utf-8″/>
<title></title>
<script src=”modules-js/qiyi.js”></script>
<script>
$(function() {
qiyiPlugin.init($(“#zong_qiyi”));
});
</script>
</head>
<div id=”zong_qiyi”>
//XXXXXXXXXXXXXX
</div>
jQuery写法:
var qiyiPlugin =
{
init: function(parentNode) {
var self = this;
self.parentNode = parentNode;
//刷新局部内容
self.parentNode
.on(‘refresh’,function(event){
self.qiyiList();
});
},
//显示
qiyiList: function(){
var self = this;
//显示内功信息
self.getQiyiList(function(result){
//console.log(result);
if(result.qiyiList){
self.qiyiHtml1();//重新覆盖html,防止重复显示内容
self.displayQiyiList(result.qiyiList);//展示页面内容
}else{
alert(“没有获得奇艺数据,请查看接口”);
}
});
},
//显示奇艺内容
displayQiyiList: function(qiyiList){
var self = this;
var top = “#zong_qiyi”;
$(top).find(‘#qiyi_control_panel’).each(function(){
if ($(this).data(‘data’)) $(this).remove();
});
var line0 = $(top).find(“#qiyi_control_panel”);
$.each(qiyiList,function(index,item2){
var line1 = $(line0).clone();
$(line1).data(‘data’,item2);//附加属性data与信息
$(line1).attr(‘id’,index+1);
$(line1).find(“#name”).html(item2.name);
$(line1).find(“#level”).html(item2.level);
$(line1).find(“#maxLevel”).html(item2.maxLevel);
$(line1).find(“#exp”).html(item2.exp+”/”+item2.needExp);
$(line1).find(“#desc1”).html(item2.desc1);
$(line0).before(line1);
$(line1).show();
$(line1).find(“#upgrade”)
.on(‘click’,function(event){
var table = $(this).parents(‘table:first’);
var info = $(table).data(‘data’);
self.clickToUpgradeQiyi(info, function(result){
if(!result.success){
alert(result.fail.desc1);
}else{
//alert(result.success.desc1);
growingPlugin.playerTopData();//改变attrs属性
self.parentNode.trigger(‘refresh’);
}
});
});
});
},
//赋html值-
qiyiHtml1: function() {
var string = “<table id=’qiyi_control_panel’ class=’table
table-bordered table-hover’ style=’display:none; width:500;’>”;
string += “<tr><td>名称:</td><td
id=name>haoren_内功</td></tr>”;
string += “<tr><td>当前等级:</td><td
id=level></td></tr>”;
string += “<tr><td>最大等级:</td><td
id=maxLevel></td></tr>”;
string += “<tr><td>exp:</td><td
id=exp></td></tr>”;
string += “<tr><td>描述:</td><td
id=desc1></td></tr>”;
string += “<tr><td><button id=’upgrade’ class=’btn
btn-link’>升级</button></td></tr>”;
string += “</table>”;
$(“#zong_qiyi”).html(string);
},
//奇艺升级
clickToUpgradeQiyi: function(info,callback) {
var query = “operation=upgradeQiyi”;
query += “&qiyiName=” + info.name;
toolsPlugin.play(query,callback);
},
//获得奇艺列表
getQiyiList: function(callback) {
var query = “operation=getQiyiList”;
toolsPlugin.play(query,callback);
},
};

enable: function() {
this._setData(‘disabled’, false);
},
disable: function() {
this._setData(‘disabled’, true);
},

您可能感兴趣的文章:

_generatePosition: function(event) {

if(!pos) pos = this.position;
var mod = d == “absolute” ? 1 : -1;
var o = this.options, scroll = this.cssPosition == ‘absolute’ &&
!(this.scrollParent[0] != document &&
$.ui.contains(this.scrollParent[0], this.offsetParent[0])) ?
this.offsetParent : this.scrollParent, scrollIsRootNode =
(/(html|body)/i).test(scroll[0].tagName);

$(items).each(function() {
var res = ($(o.item || this).attr(o.attribute || ‘id’) ||
”).match(o.expression || (/(.+)[-=_](.+)/));
if(res) str.push((o.key || res[1]+'[]’)+’=’+(o.key && o.expression ?
res[1] : res[2]));
});

var l = item.left,
r = l + item.width,
t = item.top,
b = t + item.height;

//Post events to containers
this._contactContainers(event);

_contactContainers: function(event) {
for (var i = this.containers.length – 1; i >= 0; i–){

for (var j=0, queriesLength = _queries.length; j < queriesLength;
j++) {
var item = $(_queries[j]);

var pageX = event.pageX;
var pageY = event.pageY;

// we may have missed mouseup (out of window)
(this._mouseStarted && this._mouseUp(event));

_mouseStop: function(event, noPropagation) {

var o = this.options, self = this;
this.currentContainer = this;

var self = this;
var items = [];
var queries = [];
var connectWith = this._connectWith();

.btn-on,.fn-pager
input[type=’submit’]{background-image:linear-gradient(to
bottom,#4b8af9,#2C5193);color:#fff;border-color:rgba(0,0,0,0.1)
rgba(0,0,0,0.1) rgba(0,0,0,0.1);background-color:#2C5193;border:1px
solid #2C5193\0;}
.btn-on:hover,.fn-pager
input[type=’submit’]:hover{background:#4b8af9;color:#fff;}

/*下拉列表*/
select{border:1px solid #ccc;border-radius:3px;padding:1px 2px;}

if(this.options.helper == “original”)
this.currentItem.css(this._storedCSS).removeClass(“ui-sortable-helper”);
else
this.currentItem.show();

},

for (var i=0; i < this.items.length; i++) {

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head id=”Head1″>
<title>广告管理 </title>
<link href=”Styles/css.css” rel=”stylesheet” type=”text/css” />
<script src=”Scripts/jquery-1.4.1.js”
type=”text/javascript”></script>
<script src=”Scripts/ui.core.js”
type=”text/javascript”></script>
<script src=”Scripts/ui.sortable.js”
type=”text/javascript”></script>

/*文本对齐*/
.tr{text-align:right}
.tl{text-align:left;}
.tc{text-align:center;}

//Generate the original position
this.originalPosition = this._generatePosition(event);
this.originalPageX = event.pageX;
this.originalPageY = event.pageY;

},

$.widget.prototype = {
_init: function() {},
destroy: function() {
this.element.removeData(this.widgetName)
.removeClass(this.widgetBaseClass + ‘-disabled’ + ‘ ‘ + this.namespace +
‘-state-disabled’)
.removeAttr(‘aria-disabled’);
},

//We ignore calculating positions of all connected containers when we’re
not over them
if(item.instance != this.currentContainer && this.currentContainer &&
item.item[0] != this.currentItem[0])
continue;

/*鼠标hover表格*/
.fn-table-mouse>tbody>tr:nth-child(2n+1)>td{background:#efefef;}
.fn-table
tr.on>tbody>tr>td,.fn-table-mouse>tbody>tr:hover>td{background:#FCF8E3;}

//Recache the helper size
if(!this._preserveHelperProportions)
this._cacheHelperProportions();

//Additional selectors
$.extend($.expr[‘:’], {
data: function(elem, i, match) {
return !!$.data(elem, match[3]);
},

if(this.originalPosition) { //If we are not dragging yet, we won’t check
for options

您可能感兴趣的文章:

//Create the placeholder
this._createPlaceholder();

//Prepare possible droppables
if($.ui.ddmanager)
$.ui.ddmanager.current = this;

var o = this.options;
if(o.containment == ‘parent’) o.containment =
this.helper[0].parentNode;
if(o.containment == ‘document’ || o.containment == ‘window’)
this.containment = [
0 – this.offset.relative.left – this.offset.parent.left,
0 – this.offset.relative.top – this.offset.parent.top,
$(o.containment == ‘document’ ? document : window).width() –
this.helperProportions.width – this.margins.left,
($(o.containment == ‘document’ ? document : window).height() ||
document.body.parentNode.scrollHeight) – this.helperProportions.height –
this.margins.top
];

if((this.offsetParent[0] == document.body) //This needs to be actually
done for all browsers, since pageX/pageY includes this information
|| (this.offsetParent[0].tagName &&
this.offsetParent[0].tagName.toLowerCase() == ‘html’ &&
$.browser.msie)) //Ugly IE fix
po = { top: 0, left: 0 };

// method call
(instance && isMethodCall && $.isFunction(instance[options]) &&
instance[options].apply(instance, args));
});
};

.btn:active{box-shadow:inset 0 1px 2px rgba(0,0,0,.25),inset 0 1px 3px
rgba(0,0,0,0.15);}

}));

},

// create plugin method
$.fn[name] = function(options) {
var isMethodCall = (typeof options == ‘string’),
args = Array.prototype.slice.call(arguments, 1);

contains: function(a, b) {
return document.compareDocumentPosition
? a.compareDocumentPosition(b) & 16
: a !== b && a.contains(b);
},

toArray: function(o) {

_mouseDrag: function(event) {

_createPlaceholder: function(that) {

refresh: function(event) {
this._refreshItems(event);
this.refreshPositions();
},

if(!itemWithLeastDistance && !this.options.dropOnEmpty) //Check if
dropOnEmpty is enabled
continue;

//Update the placeholder
this.options.placeholder.update(this.currentContainer,
this.placeholder);

if ($.ui.ddmanager && !o.dropBehaviour)
$.ui.ddmanager.prepareOffsets(this, event);

$(this.options.handle, currentItem).find(“*”).andSelf().each(function()
{ if(this == event.target) validHandle = true; });
if(!validHandle) return false;
}

},

/** Mouse Interaction Plugin **/

event = $.Event(event);
event.type = eventName;

/*鼠标标记*/
.hand{cursor:pointer;}

if(connectWith) {
for (var i = connectWith.length – 1; i >= 0; i–){
var cur = $(connectWith[i]);
for (var j = cur.length – 1; j >= 0; j–){
var inst = $.data(cur[j], ‘sortable’);
if(inst && inst != this && !inst.options.disabled) {
queries.push([$.isFunction(inst.options.items) ?
inst.options.items.call(inst.element[0], event, { item:
this.currentItem }) : $(inst.options.items, inst.element), inst]);
this.containers.push(inst);
}
};
};
}

var isOverElementHeight = $.ui.isOverAxis(this.positionAbs.top +
this.offset.click.top, item.top, item.height),
isOverElementWidth = $.ui.isOverAxis(this.positionAbs.left +
this.offset.click.left, item.left, item.width),
isOverElement = isOverElementHeight && isOverElementWidth,
verticalDirection = this._getDragVerticalDirection(),
horizontalDirection = this._getDragHorizontalDirection();

this.element
.bind(‘mousedown.’+this.widgetName, function(event) {
return self._mouseDown(event);
})
.bind(‘click.’+this.widgetName, function(event) {
if(self._preventClickEvent) {
self._preventClickEvent = false;
event.stopImmediatePropagation();
return false;
}
});

/*标准表格*/
.fn-table{width:100%;}
.fn-table>tbody>tr>td{padding:3px;background:#fff;border:1px
solid #CEDCED;}
.fn-table>tbody>tr>th{background:#E3F5FF;padding:2px;border:1px
solid #CEDCED;font-weight:bold;}

_clear: function(event, noPropagation) {

//Cache the helper size
this._cacheHelperProportions();

/*输入框*/
input:-moz-placeholder,textarea:-moz-placeholder {color: #999999;}
input:-ms-input-placeholder,textarea:-ms-input-placeholder {color:
#999999;}
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder
{color: #999999;}

if(connectWith && connected) {
for (var i = connectWith.length – 1; i >= 0; i–){
var cur = $(connectWith[i]);
for (var j = cur.length – 1; j >= 0; j–){
var inst = $.data(cur[j], ‘sortable’);
if(inst && inst != this && !inst.options.disabled) {
queries.push([$.isFunction(inst.options.items) ?
inst.options.items.call(inst.element) : $(inst.options.items,
inst.element).not(“.ui-sortable-helper”), inst]);
}
};
};
}

if(scrolled !== false && $.ui.ddmanager && !o.dropBehaviour)
$.ui.ddmanager.prepareOffsets(this, event);
}

//Cache the margins of the original element
this._cacheMargins();

},

//Do what was originally in plugins
if(this._storedCursor) $(‘body’).css(“cursor”, this._storedCursor);
//Reset cursor
if(this._storedOpacity) this.helper.css(“opacity”,
this._storedOpacity); //Reset cursor
if(this._storedZIndex) this.helper.css(“zIndex”, this._storedZIndex ==
‘auto’ ? ” : this._storedZIndex); //Reset z-index

//Create the placeholder
self.placeholder = $(o.placeholder.element.call(self.element,
self.currentItem));

},

/*分页*/
.fn-pager{background:#E3F5FF;border:1px solid #CEDCED;margin:0 0
5px;border-top:0;}
.fn-pager
div{line-height:26px;white-space:nowrap;word-break:break-all;}
.fn-pager input{margin-left:5px;}
.fn-pager a{border:1px solid #E3F5FF;padding:3px 5px;}
.fn-pager span.on{background:#2C5193;border:1px solid
#2C5193;color:#fff;padding:3px 5px;font-weight:bold;}
.fn-pager a:hover{background:#2C5193;border:1px solid
#2C5193;color:#fff;}
.fn-pager input,.fn-pager select,.fn-pager a,.fn-pager
span{vertical-align:middle;}
.fn-pagerExt{float:right;margin-top:-22px;}
.fn-pagerExt input{vertical-align:middle;}

_mouseStart: function(event, overrideHandle, noActivation) {

this.fromOutside = false;
return true;

var isOverElement = (y1 + dyClick) > t && (y1 + dyClick) < b &&
(x1 + dxClick) > l && (x1 + dxClick) < r;

if(helper[0] == this.currentItem[0])
this._storedCSS = { width: this.currentItem[0].style.width, height:
this.currentItem[0].style.height, position:
this.currentItem.css(“position”), top: this.currentItem.css(“top”),
left: this.currentItem.css(“left”) };

};

if(!noPropagation) this._trigger(“beforeStop”, event,
this._uiHash());

$.extend(this.offset, {
click: { //Where the click happened, relative to the element
left: event.pageX – this.offset.left,
top: event.pageY – this.offset.top
},
parent: this._getParentOffset(),
relative: this._getRelativeOffset() //This is a relative to absolute
position minus the actual position calculation – only used for relative
positioned helper
});

if (this._mouseDistanceMet(event) && this._mouseDelayMet(event)) {
this._mouseStarted =
(this._mouseStart(this._mouseDownEvent, event) !== false);
(this._mouseStarted ? this._mouseDrag(event) :
this._mouseUp(event));
}

window.setTimeout(function() {
if(counter == self.counter) self.refreshPositions(!hardRefresh);
//Precompute after each DOM insertion, NOT on mousemove
},0);

body{font-family:”宋体”,Arail,verdana;font-size:12px;line-height:1.5em;color:#222;background:#fff
;}

$.ui.mouse = {
_mouseInit: function() {
var self = this;

if (this.floating && horizontalDirection) {
return ((horizontalDirection == “right” && isOverRightHalf) ||
(horizontalDirection == “left” && !isOverRightHalf));
} else {
return verticalDirection && ((verticalDirection == “down” &&
isOverBottomHalf) || (verticalDirection == “up” &&
!isOverBottomHalf));
}

//添加广告
function addlinks() {
editWidget(“PhoneArticleListPageInsOrUp.aspx”);
}
</script>
<script type=”text/javascript”>
$(function () {
$(‘.sortable’).sortable({ cursor: ‘move’ });
});
</script>
<script type=”text/javascript”>
//编辑
function editlink(prefix, aftfix, obj) {
editWidget(“PhoneArticleListPageInsOrUp.aspx?ID=” + obj);
}
</script>
<script type=”text/javascript”>
function getsortresult(prefix, aftfix) {
var flag = document.getElementById(“” + prefix + “_sortable_” + aftfix

if(this.containment) {
if(event.pageX – this.offset.click.left < this.containment[0])
pageX = this.containment[0] + this.offset.click.left;
if(event.pageY – this.offset.click.top < this.containment[1]) pageY
= this.containment[1] + this.offset.click.top;
if(event.pageX – this.offset.click.left > this.containment[2])
pageX = this.containment[2] + this.offset.click.left;
if(event.pageY – this.offset.click.top > this.containment[3]) pageY
= this.containment[3] + this.offset.click.top;
}

return false;

//If we are using droppables, inform the manager about the drop
if ($.ui.ddmanager && !this.options.dropBehaviour)
$.ui.ddmanager.drop(this, event);

//Set the helper position
if(!this.options.axis || this.options.axis != “y”)
this.helper[0].style.left = this.position.left+’px’;
if(!this.options.axis || this.options.axis != “x”)
this.helper[0].style.top = this.position.top+’px’;

// 1. If a className is set as ‘placeholder option, we don’t force sizes

[css] view plaincopy在CODE上查看代码片派生到我的代码片

// This is a special case where we need to modify a offset calculated on
start, since the following happened:
// 1. The position of the helper is absolute, so it’s position is
calculated based on the next positioned parent
// 2. The actual offset parent is a child of the scroll parent, and the
scroll parent isn’t the document, which means that
// the scroll is included in the initial calculation of the offset of
the parent, and never recalculated upon drag
if(this.cssPosition == ‘absolute’ && this.scrollParent[0] != document
&& $.ui.contains(this.scrollParent[0], this.offsetParent[0])) {
po.left += this.scrollParent.scrollLeft();
po.top += this.scrollParent.scrollTop();
}

//Do scrolling
if(this.options.scroll) {
var o = this.options, scrolled = false;
if(this.scrollParent[0] != document && this.scrollParent[0].tagName
!= ‘HTML’) {

if(!o.placeholder || o.placeholder.constructor == String) {
var className = o.placeholder;
o.placeholder = {
element: function() {

_convertPositionTo: function(d, pos) {

// copy original event properties over to the new event
// this would happen if we could call $.event.fix instead of $.Event
// but we don’t have a way to force an event to be fixed multiple
times
if (event.originalEvent) {
for (var i = $.event.props.length, prop; i;) {
prop = $.event.props[–i];
event[prop] = event.originalEvent[prop];
}
}

$.fn.removeAttr = function(name) {
return (ariaState.test(name)
? this.each(function() {
this.removeAttributeNS(ariaNS, name.replace(ariaState, “”));
}) : removeAttr.call(this, name));
};
}

// TODO: make sure destroying one instance of mouse doesn’t mess with
// other instances of mouse
_mouseDestroy: function() {
this.element.unbind(‘.’+this.widgetName);

return this.floating ?
( ((horizontalDirection && horizontalDirection == “right”) ||
verticalDirection == “down”) ? 2 : 1 )
: ( verticalDirection && (verticalDirection == “down” ? 2 : 1) );

isOver: function(y, x, top, left, height, width) {
//Determines when x, y coordinates is over “b” element
return $.ui.isOverAxis(y, top, height) && $.ui.isOverAxis(x, left,
width);
},

//We have to refresh the items data once first
this._refreshItems(event);

disableSelection: function() {
return this
.attr(‘unselectable’, ‘on’)
.css(‘MozUserSelect’, ‘none’)
.bind(‘selectstart.ui’, function() { return false; });
},

//Post deactivating events to containers
for (var i = this.containers.length – 1; i >= 0; i–){
this.containers[i]._trigger(“deactivate”, null,
self._uiHash(this));
if(this.containers[i].containerCache.over) {
this.containers[i]._trigger(“out”, null, self._uiHash(this));
this.containers[i].containerCache.over = 0;
}
}

3、主要js

$.widget = function(name, prototype) {
var namespace = name.split(“.”)[0];
name = name.split(“.”)[1];

this.lastPositionAbs = this.positionAbs;
return false;

// TODO: determine which cases actually cause this to happen
// if the element doesn’t have the scroll set, see if it’s possible to
// set the scroll
el[scroll] = 1;
has = (el[scroll] > 0);
el[scroll] = 0;
return has;
},

scrollParent: function() {
var scrollParent;
if(($.browser.msie && (/(static|relative)/).test(this.css(‘position’)))
|| (/absolute/).test(this.css(‘position’))) {
scrollParent = this.parents().filter(function() {
return (/(relative|absolute|fixed)/).test($.curCSS(this,’position’,1))
&&
(/(auto|scroll)/).test($.curCSS(this,’overflow’,1)+$.curCSS(this,’overflow-y’,1)+$.curCSS(this,’overflow-x’,1));
}).eq(0);
} else {
scrollParent = this.parents().filter(function() {
return
(/(auto|scroll)/).test($.curCSS(this,’overflow’,1)+$.curCSS(this,’overflow-y’,1)+$.curCSS(this,’overflow-x’,1));
}).eq(0);
}

// $.widget is a factory to create jQuery plugins
// taking some boilerplate code out of the plugin code
function getter(namespace, plugin, method, args) {
function getMethods(type) {
var methods = $[namespace][plugin][type] || [];
return (typeof methods == ‘string’ ? methods.split(/,?\s+/) :
methods);
}

items.push({
item: item,
instance: targetData,
width: 0, height: 0,
left: 0, top: 0
});
};
};

},

_cacheMargins: function() {
this.margins = {
left: (parseInt(this.currentItem.css(“marginLeft”),10) || 0),
top: (parseInt(this.currentItem.css(“marginTop”),10) || 0)
};
},

if(this.options.disabled || this.options.type == ‘static’) return
false;

//Get the items
this.refresh();

this.currentContainer = this.containers[i];
itemWithLeastDistance ? this._rearrange(event, itemWithLeastDistance,
null, true) : this._rearrange(event, null,
this.containers[i].element, true);
this._trigger(“change”, event, this._uiHash());
this.containers[i]._trigger(“change”, event, this._uiHash(this));

/*iframe 头部样式,仅后台部分案例*/
.fn-iframe-hd{padding:2px
5px;background:#2C5193;margin-bottom:30px;line-height:22px;height:22px;color:#fff;position:fixed;left:0;top:0;width:100%;}
.fn-iframe-hd
.close{background:url(/Manager/Themes/images/icons/closed.png) no-repeat
center
center;float:right;width:14px;height:13px;cursor:pointer;padding:4px
5px;margin-right:10px;}
.fn-iframe-hd .close:hover{opacity:0.8;}
.fn-iframe-hd .tt{float:left;font-weight:bold;}

this._mouseDownEvent = event;

_mouseUp: function(event) {
$(document)
.unbind(‘mousemove.’+this.widgetName, this._mouseMoveDelegate)
.unbind(‘mouseup.’+this.widgetName, this._mouseUpDelegate);

/*
* jQuery UI Sortable 1.7.1
*
* Copyright (c) 2009 AUTHORS.txt ()
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
*
*
* Depends:
* ui.core.js
*/
(function($) {

//Get the next scrolling parent
this.scrollParent = this.helper.scrollParent();

if(o.opacity) { // opacity option
if (this.helper.css(“opacity”)) this._storedOpacity =
this.helper.css(“opacity”);
this.helper.css(“opacity”, o.opacity);
}

for (var j=0; j < list.length; j++) {
if(list[j] == this.items[i].item[0])
this.items.splice(i,1);
};

var self = that || this, o = self.options;

// constructor
(!instance && !isMethodCall &&
$.data(this, name, new $[namespace][name](this,
options))._init());

},

1、前端页面

if(this.options.revert) {
var self = this;
var cur = self.placeholder.offset();

//$(this.placeholder[0]).remove(); would have been the jQuery way –
unfortunately, it unbinds ALL events from the original node!
if(this.placeholder[0].parentNode)
this.placeholder[0].parentNode.removeChild(this.placeholder[0]);
if(this.options.helper != “original” && this.helper &&
this.helper[0].parentNode) this.helper.remove();

var items = this._getItemsAsjQuery(o && o.connected);
var ret = []; o = o || {};

},

isOverAxis: function(x, reference, size) {
//Determines when x coordinate is over “b” element axis
return (x > reference) && (x < (reference + size));
},

//jQuery plugins
$.fn.extend({
remove: function() {
// Safari has a native remove event which actually removes DOM
elements,
// so we have to use triggerHandler instead of trigger (#3037).
$(“*”, this).add(this).each(function() {
$(this).triggerHandler(“remove”);
});
return _remove.apply(this, arguments );
},

_cacheHelperProportions: function() {
this.helperProportions = {
width: this.helper.outerWidth(),
height: this.helper.outerHeight()
};
},

destroy: function() {
this.element
.removeClass(“ui-sortable ui-sortable-disabled”)
.removeData(“sortable”)
.unbind(“.sortable”);
this._mouseDestroy();

if (el[scroll] > 0) { return true; }

//Find out if the clicked node (or one of its parents) is a actual item
in this.items
var currentItem = null, self = this, nodes =
$(event.target).parents().each(function() {
if($.data(this, ‘sortable-item’) == self) {
currentItem = $(this);
return false;
}
});
if($.data(event.target, ‘sortable-item’) == self) currentItem =
$(event.target);

var self = this,
btnIsLeft = (event.which == 1),
elIsCancel = (typeof this.options.cancel == “string” ?
$(event.target).parents().add(event.target).filter(this.options.cancel).length
: false);
if (!btnIsLeft || elIsCancel || !this._mouseCapture(event)) {
return true;
}

/*无效状态*/
input[disabled], select[disabled], textarea[disabled],
input[readonly], select[readonly], textarea[readonly]
{background-color: #eee;cursor:
not-allowed;box-shadow:none;opacity:0.5}

hasScroll: function(el, a) {

this._trigger(“change”, event, this._uiHash());
break;
}
}

.mt30{margin-top:30px;}.mb30{margin-bottom:30px;}
.pt30{padding-top:30px;}.pb30{padding-bottom:30px;}

this.items = [];
this.containers = [this];
var items = this.items;
var self = this;
var queries = [[$.isFunction(this.options.items) ?
this.options.items.call(this.element[0], event, { item:
this.currentItem }) : $(this.options.items, this.element), this]];
var connectWith = this._connectWith();

},

// Only after we got the offset, we can change the helper’s position to
absolute
// TODO: Still need to figure out a way to make relative sorting
possible
this.helper.css(“position”, “absolute”);
this.cssPosition = this.helper.css(“position”);

/*浮动*/
.fn-fl{float:left;}
.fn-fr{float:right;}

// preventDefault() is used to prevent the selection of text here –
// however, in Safari, this causes select boxes not to be selectable
// anymore, so this fix is needed
($.browser.safari || event.preventDefault());

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片

// $.ui.plugin is deprecated. Use the proxy pattern instead.
plugin: {
add: function(module, option, set) {
var proto = $.ui[module].prototype;
for(var i in set) {
proto.plugins[i] = proto.plugins[i] || [];
proto.plugins[i].push([option, set[i]]);
}
},
call: function(instance, name, args) {
var set = instance.plugins[name];
if(!set || !instance.element[0].parentNode) { return; }

// add widget prototype
$[namespace][name].prototype = $.extend({}, $.widget.prototype,
prototype);

if(!event) return;

_intersectsWithPointer: function(item) {

queries.push([$.isFunction(this.options.items) ?
this.options.items.call(this.element, null, { options: this.options,
item: this.currentItem }) : $(this.options.items,
this.element).not(“.ui-sortable-helper”), this]);

//Cache the former DOM position
this.domPosition = { prev: this.currentItem.prev()[0], parent:
this.currentItem.parent()[0] };

/*细线表格*/
.fn-table-line>tbody>tr>td{}

/*按钮*/
.btn,.fn-pager input[type=’submit’]{border-radius:3px;padding:1px
2px;border:1px solid #B3B3B3;cursor:pointer;background-image:
linear-gradient(to bottom, #fff, #e6e6e6); box-shadow: 0 1px 0
rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0,
0.05);color:#666;line-height:20px;vertical-align:middle;text-decoration:none;padding:1px
3px\0;}
a.btn{padding:3px 6px;}
.btn:hover{background:#eee;text-decoration:none;}

/*干净表格*/
.fn-table-clear{}
.fn-table-clear>tbody>tr>td{padding:3px;background:#fff;border:none;}
.fn-table-clear>tbody>tr>th{background:#E3F5FF;padding:3px;border:none;}

$.extend($.ui.sortable, {
getter: “serialize toArray”,
version: “1.7.1”,
eventPrefix: “sort”,
defaults: {
appendTo: “parent”,
axis: false,
cancel: “:input,option”,
connectWith: false,
containment: false,
cursor: ‘auto’,
cursorAt: false,
delay: 0,
distance: 1,
dropOnEmpty: true,
forcePlaceholderSize: false,
forceHelperSize: false,
grid: false,
handle: false,
helper: “original”,
items: ‘> *’,
opacity: false,
placeholder: false,
revert: false,
scroll: true,
scrollSensitivity: 20,
scrollSpeed: 20,
scope: “default”,
tolerance: “intersect”,
zIndex: 1000
}
});

//Regenerate the absolute position used for position checks
this.positionAbs = this._convertPositionTo(“absolute”);

//Call callbacks
this._trigger(“start”, event, this._uiHash());

/*标准Tab选项卡*/
.fn-tab .hd li{float:left;margin-right:2px;padding:2px 5px;border:1px
solid #2C5193;border-radius:5px 5px 0
0;cursor:pointer;background:#2C5193;color:#fff;}
.fn-tab .hd li.on{background:#4B8AF9;color:#fff;border:1px solid
#4B8AF9;border-bottom:0;}
.fn-tab .bd{border:1px solid #ddd;padding:3px;margin-top:-1px;}
.fn-tab .bd div.item{display:none;}
.fn-tab .bd div.on{display:block;}

_removeCurrentsFromItems: function() {

var _remove = $.fn.remove,
isFF2 = $.browser.mozilla && (parseFloat($.browser.version) < 1.9);

if(event.pageX – $(document).scrollLeft() < o.scrollSensitivity)
scrolled = $(document).scrollLeft($(document).scrollLeft() –
o.scrollSpeed);
else if($(window).width() – (event.pageX – $(document).scrollLeft())
< o.scrollSensitivity)
scrolled = $(document).scrollLeft($(document).scrollLeft() +
o.scrollSpeed);

$.each(options, function(key, value) {
self._setData(key, value);
});
},
_getData: function(key) {
return this.options[key];
},
_setData: function(key, value) {
this.options[key] = value;

//When entering a new container, we will find the item with the least
distance and append our item near it
var dist = 10000; var itemWithLeastDistance = null; var base =
this.positionAbs[this.containers[i].floating ? ‘left’ : ‘top’];
for (var j = this.items.length – 1; j >= 0; j–) {
if(!$.ui.contains(this.containers[i].element[0],
this.items[j].item[0])) continue;
var cur = this.items[j][this.containers[i].floating ? ‘left’ :
‘top’];
if(Math.abs(cur – base) < dist) {
dist = Math.abs(cur – base); itemWithLeastDistance = this.items[j];
}
}

_trigger: function() {
if ($.widget.prototype._trigger.apply(this, arguments) === false) {
this.cancel();
}
},

_connectWith: function() {
var options = this.options;
return options.connectWith.constructor == String
? [options.connectWith]
: options.connectWith;
},

if(!currentItem) return false;
if(this.options.handle && !overrideHandle) {
var validHandle = false;

//Rearrange
for (var i = this.items.length – 1; i >= 0; i–) {

var self = this;

var p = t.offset();
item.left = p.left;
item.top = p.top;
};

return true;

if(this.helper[0] == this.currentItem[0]) {
for(var i in this._storedCSS) {
if(this._storedCSS[i] == ‘auto’ || this._storedCSS[i] == ‘static’)
this._storedCSS[i] = ”;
}
this.currentItem.css(this._storedCSS).removeClass(“ui-sortable-helper”);
} else {
this.currentItem.show();
}

//Compute the helpers position
this.position = this._generatePosition(event);
this.positionAbs = this._convertPositionTo(“absolute”);

// This is another very weird special case that only happens for
relative elements:
// 1. If the css position is relative
// 2. and the scroll parent is the document or similar to the offset
parent
// we have to refresh the relative offset during the scroll so there are
no jumps
if(this.cssPosition == ‘relative’ && !(this.scrollParent[0] !=
document && this.scrollParent[0] != this.offsetParent[0])) {
this.offset.relative = this._getRelativeOffset();
}

_trigger: function(type, event, data) {
var callback = this.options[type],
eventName = (type == this.widgetEventPrefix
? type : this.widgetEventPrefix + type);

//Interconnect with droppables
if($.ui.ddmanager) $.ui.ddmanager.drag(this, event);

/* Be careful with the following core functions */
_intersectsWith: function(item) {

var dyClick = this.offset.click.top,
dxClick = this.offset.click.left;

focusable: function(element) {
var nodeName = element.nodeName.toLowerCase(),
tabIndex = $.attr(element, ‘tabindex’);
return (/input|select|textarea|button|object/.test(nodeName)
? !element.disabled
: ‘a’ == nodeName || ‘area’ == nodeName
? element.href || !isNaN(tabIndex)
: !isNaN(tabIndex))
// the element and all of its ancestors must be visible
// the browser may report that the area is hidden
&& !$(element)[‘area’ == nodeName ? ‘parents’ :
‘closest’](‘:hidden’).length;
},

this.containment = [
co.left + (parseInt($(ce).css(“borderLeftWidth”),10) || 0) +
(parseInt($(ce).css(“paddingLeft”),10) || 0) – this.margins.left,
co.top + (parseInt($(ce).css(“borderTopWidth”),10) || 0) +
(parseInt($(ce).css(“paddingTop”),10) || 0) – this.margins.top,
co.left+(over ? Math.max(ce.scrollWidth,ce.offsetWidth) :
ce.offsetWidth) – (parseInt($(ce).css(“borderLeftWidth”),10) || 0) –
(parseInt($(ce).css(“paddingRight”),10) || 0) –
this.helperProportions.width – this.margins.left,
co.top+(over ? Math.max(ce.scrollHeight,ce.offsetHeight) :
ce.offsetHeight) – (parseInt($(ce).css(“borderTopWidth”),10) || 0) –
(parseInt($(ce).css(“paddingBottom”),10) || 0) –
this.helperProportions.height – this.margins.top
];
}

<%@ Page Language=”C#” AutoEventWireup=”true”
CodeFile=”拖动排序Li或Table.aspx.cs” Inherits=”拖动排序Li或Table”
%>

this.element = $(element)
.bind(‘setData.’ + name, function(event, key, value) {
if (event.target == element) {
return self._setData(key, value);
}
})
.bind(‘getData.’ + name, function(event, key) {
if (event.target == element) {
return self._getData(key);
}
})
.bind(‘remove’, function() {
return self.destroy();
});
};

//Cache variables and intersection, continue if no intersection
var item = this.items[i], itemElement = item.item[0], intersection =
this._intersectsWithPointer(item);
if (!intersection) continue;

_getDragVerticalDirection: function() {
var delta = this.positionAbs.top – this.lastPositionAbs.top;
return delta != 0 && (delta > 0 ? “down” : “up”);
},

var list = this.currentItem.find(“:data(sortable-item)”);

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图