Heim > Web-Frontend > js-Tutorial > Hauptteil

Maus-Drag-Sortierung Li oder Table_jquery, implementiert durch jquery

WBOY
Freigeben: 2016-05-16 16:50:17
Original
1456 Leute haben es durchsucht

1. Startseite

Code kopieren Der Code lautet wie folgt:

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




广告管理























value="保存顺序" />

提示:按住鼠标拖动链接,之后单击保存按钮就可以完成对链接的排列










2、CSS样式

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

body,div,dl,dt, dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding: 0;}
table{border-collapse:collapse;border-spacing:0;}
ol,ul{list-style:none;}

a{color:#333;text- decoration:none;}
a:hover{color:#f30;text-decoration:underline}

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


.clearfix:after{content:".";display:block;height:0;clear:both;visibility :hidden;}
.clearfix{display:block;}
* html .clearfix{height:1%;}
.clear{clear:both;}

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

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

.m5{margin:5px;} .m10{margin:10px;}
.mt5 { margin-top:5px;}.mr5 { margin-right:5px;}.mb5 { margin-bottom:5px;}.ml5 { margin-left:5px;}
.mt10 { margin- top:10px;}.mr10 { margin-right:10px;}.mb10 { margin-bottom:10px;}.ml10 { margin-left:10px;}

.p5{padding:5px;} . p10{padding:10px;}
.pt5 { padding-top:5px;}.pr5 { padding-right:5px;}.pb5 { padding-bottom:5px;}.pl5 { padding-left:5px;}
.pt10 { padding-top:10px;}.pr10 { padding-right:10px;}.pb10 { padding-bottom:10px;}.pl10 { padding-left:10px;}

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

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

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

/*输入框*/
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;}

.txt,textarea,input[ type="text"], input[type="password"] {border: 1px solid #ccc;box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;transition: border 0.2s linear 0s, box-shadow 0,2s linear 0s;border-radius:3px;padding:2px 3px;}
.txt:focus,textarea:focus,input[type="text"]:focus, input[type="password" ]:focus {border: 1px solid #2C5193;box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(44, 81, 147, 0.6);}
.txta {font-size:12px;line-height:18px;}
.txt20{width:20px;}
.txt30{width:30px;}
.txt50{width:50px;}
.txt75{width:75px;}
.txt85{width:85px;}
.txt100{width:100px;}
.txt125{width:125px;}
.txt150{width:150px ;}
.txt175{width:175px;}
.txt200{width:200px;}
.txt250{width:250px;}
.txt280{width:280px;}
. txt300{width:300px;}
.txt350{width:350px;}
.txt400{width:400px;}

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

.fn-table-space>tbody>tr:nth-child(2n 1)>td {background:#efefef;}

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

/*鼠标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;}

/*功能表格*/
.fn-table-function>tbody>tr>td:nth-child (2n 1){background:#E3F5FF;text-align:right;font-weight:bold;}
.fn-table-function>tbody>tr>td:first-child{background:#E3F5FF;text- align:right;font-weight:bold;}

/*干净表格*/
.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;}

/*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;}

/*标准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;}

/*搜索框*/
.fn-searchbar{border:1px solid #CEDCED; padding:2px;border-radius:3px;}
.fn-searchbar input,.fn-searchbar select{vertical-align:middle;}

/*分页*/
.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;}

/*按钮*/
.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 ;}
a.btn{padding:3px 6px;}
.btn:hover{background:#eee;text-decoration:none;}

.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 ;}
.btn-on: hover,.fn-pager input[type='submit']:hover{background:#4b8af9;color:#fff;}

.btn-gray{background:linear-gradient(to bottom,#ccc ,#efefef);color:#fff;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.1);cursor:not-allowed ;}
.btn-gray:hover{background:#eee;text-decoration:none;}

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

#tooltip{position: absolute;border: 1px solid #333;background: #f7f5d1;padding: 2px 5px ;color: #333;display: none;width: 500px;}
#tooltip{position:absolute;color:#333;display:block;background-color:#fff;border:1px solid #555;box- Shadow:0 0 10px rgba(0,0,0,.3);border-radius:5px;padding:3px;min-width:160px;min-height:80px;}
#tooltip img{border-radius :5px;}

/*文字大小*/
.font12{font-size:12px;}
.font13{font-size:13px;}
.font14{font- size:14px;}
.font15{font-size:15px;}
.font16{font-size:16px;}
.font17{font-size:17px;}
.font18{ Schriftgröße:18px;}
/*文字颜色*/
.font-red{color:Red;}
.font-green{color:Green;}
.font-white{ color:White;}
.font-gray{color:Gray;}

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


3、主要js

jquery.js

ui.core.js

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

/*
* jQuery UI 1.7.1
*
* Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)
* Doppelt lizenziert unter dem MIT (MIT-LICENSE.txt)
* und GPL-Lizenzen (GPL-LICENSE.txt).
*
* http://docs.jquery.com/UI
*/
;jQuery.ui || (function($) {

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

//Hilfsfunktionen und UI-Objekt
$.ui = {
Version: "1.7.1",

// $.ui.plugin ist veraltet.
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 = example.plugins[name]
if(!set || !instance.element[0].parentNode) { return }

for (var i = 0; i < set.length; i ) {
if (instance.options[set[i][0]]) {
set[i][1] .apply(instance.element, args);
}
}
}
},

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

hasScroll: function(el, a) {

//Wenn der Überlauf ausgeblendet ist, verfügt das Element möglicherweise über zusätzlichen Inhalt, der Benutzer möchte ihn jedoch ausblenden
if ($(el).css('overflow') == 'hidden') { return false ; }

var scroll = (a && a == 'left') ? 'scrollLeft': 'scrollTop',
has = false;

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

// TODO: Bestimmen Sie, in welchen Fällen dies tatsächlich geschieht
// Wenn für das Element kein Bildlauf festgelegt ist, prüfen Sie, ob es möglich ist,
// den Bildlauf festzulegen
el[scroll] = 1;
has = (el[scroll] > 0);
el[scroll] = 0;
Rückkehr hat;
},

isOverAxis: function(x, reference, size) {
//Bestimmt, wann die x-Koordinate über der „b“-Elementachse liegt
return (x > reference) && ( x < (Referenzgröße));
},

isOver: function(y, x, top, left, height, width) {
//Bestimmt, wann x-, y-Koordinaten über dem „b“-Element liegen
return $ .ui.isOverAxis(y, top, height) && $.ui.isOverAxis(x, left, width);
},

keyCode: {
BACKSPACE: 8,
CAPS_LOCK: 20,
COMMA: 188,
CONTROL: 17,
DELETE: 46,
UNTEN: 40,
ENDE: 35,
EINGABE: 13,
ESCAPE: 27,
HOME: 36,
EINFÜGEN: 45,
LINKS: 37,
NUMPAD_ADD: 107,
NUMPAD_DECIMAL: 110,
NUMPAD_DIVIDE: 111,
NUMPAD_ENTER: 108,
NUMPAD_MULTIPLY: 106,
NUMPAD_SUBTRACT: 109,
PAGE_DOWN: 34 ,
PAGE_UP: 33,
PERIOD: 190,
RIGHT: 39,
SHIFT: 16,
SPACE: 32,
TAB: 9,
UP: 38
}
};

// WAI-ARIA-Normalisierung
if (isFF2) {
var attr = $.attr,
removeAttr = $.fn.removeAttr,
ariaNS = "http:/ /www.w3.org/2005/07/aaa",
ariaState = /^aria-/,
ariaRole = /^wairole:/;

$.attr = function(elem, name, value) {
var set = value !== undefiniert;

return (name == 'role'
? (set
? attr.call(this, elem, name, "wairole:" value)
: (attr.apply(this , Argumente) ||. "").replace(ariaRole, ""))
: (ariaState.test(name)
? (set
? elem.setAttributeNS(ariaNS,
name.replace (ariaState, "aaa:"), value)
: attr.call(this, elem, name.replace(ariaState, "aaa:")))
: attr.apply(this, arguments))) ;
};

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

//jQuery-Plugins
$.fn.extend({
remove: function() {
// Safari verfügt über ein natives Remove-Ereignis, das tatsächlich DOM-Elemente entfernt.
// also müssen wir triggerHandler anstelle von trigger (
$("*", this).add(this).each(function() {
$(this) verwenden. triggerHandler("remove");
return _remove.apply(this, arguments );

enableSelection: function() {
return this
.attr('unselectable', 'off')
.css('MozUserSelect', '')
.unbind('selectstart.ui');

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

scrollParent: function() {
var scrollParent; 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));
}

return (/fixed/).test(this.css('position')) || !scrollParent.length ? $(Dokument) : scrollParent;
}
});


//Zusätzliche Selektoren
$.extend($.expr[':'], {
data: function(elem, i, match) {
return !! $.data(elem, match[3]);
},

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)
// das Element und alle seine Vorfahren müssen sichtbar sein
/ / Der Browser meldet möglicherweise, dass der Bereich ausgeblendet ist
&& !$(element)['area' == nodeName ? 'parents' : 'closest'](':hidden').length; 🎜>
tabtable: function(element) {
var tabIndex = $.attr(element, 'tabindex');
return (isNaN(tabIndex) || tabIndex >= 0) && $(element ).is(':focusable');
}
});


// $.widget ist eine Fabrik zum Erstellen von jQuery-Plugins
// nimmt etwas Boilerplate-Code aus dem Plugin-Code
function getter(namespace, plug-in, method, args) {
Funktion getMethods(Typ) {
Var-Methoden = $[Namespace][Plugin][Typ] || [];
return (typeofmethods == 'string' ? methoden.split(/,?s /) : Methoden);
}

var methoden = getMethods('getter');
if (args.length == 1 && typeof args[0] == 'string') {
methods = models.concat(getMethods('getterSetter'));
}
return ($.inArray(Methode, Methoden) != -1);
}

$.widget = function(name, prototyp) {
var namespace = name.split(".")[0];
name = name.split(".")[1];

// Plugin-Methode erstellen
$.fn[name] = function(options) {
var isMethodCall = (typeof options == 'string'),
args = Array.prototype .slice.call(arguments, 1);

// Aufrufe interner Methoden verhindern
if (isMethodCall && options.substring(0, 1) == '_') {
return this;
}

// Getter-Methoden behandeln
if (isMethodCall && getter(namespace, name, options, args)) {
var example = $.data(this[0], name );
return (instance ? example[options].apply(instance, args)
: undefiniert);
}

// Initialisierung und Nicht-Getter-Methoden behandeln
return this.each(function() {
var example = $.data(this, name);

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

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

// Widget-Konstruktor erstellen
$[namespace] = $[namespace] || {};
$[namespace][name] = function(element, options) {
var self = this;

this.namespace = Namespace;
this.widgetName = Name;
this.widgetEventPrefix = $[namespace][name].eventPrefix || Name;
this.widgetBaseClass = namespace '-' name;

this.options = $.extend({},
$.widget.defaults,
$[namespace][name].defaults,
$.metadata && $.metadata. get(element)[name],
Optionen);

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();
} );
};

// Widget-Prototyp hinzufügen
$[namespace][name].prototype = $.extend({}, $.widget.prototype, Prototyp);

// TODO: Getter- und GetterSetter-Eigenschaften aus Widget-Prototyp
// und Plugin-Prototyp
zusammenführen$[namespace][name].getterSetter = 'option';
};

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

option: function(key, value) {
var options = key,
self = this;

if (typeof key == "string") {
if (value === undefiniert) {
return this._getData(key);
}
options = {};
Optionen[Schlüssel] = Wert;
}

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

if (key == 'disabled') {
this.element
[value ? 'addClass' : 'removeClass'](
this.widgetBaseClass '-disabled' ' '
this.namespace '-state-disabled')
.attr("aria-disabled", value);
}
},

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

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

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

// ursprüngliche Ereigniseigenschaften in das neue Ereignis kopieren
// Dies würde passieren, wenn wir $.event.fix anstelle von $.Event
// aufrufen könnten, aber das ist nicht der Fall eine Möglichkeit, die mehrfache Behebung eines Ereignisses zu erzwingen
if (event.originalEvent) {
for (var i = $.event.props.length, prop; i;) {
prop = $. event.props[--i];
event[prop] = event.originalEvent[prop];
}
}

this.element.trigger(event, data);

return !($.isFunction(callback) && callback.call(this.element[0], event, data) === false
|| event.isDefaultPrevented());
}
};

$.widget.defaults = {
disabled: false
};


/**Maus-Interaktions-Plugin **/

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

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

// Textauswahl im IE verhindern
if ($.browser.msie) {
this._mouseUnselectable = this.element.attr('unselectable');
this.element.attr('unselectable', 'on');
}

this.started = false;
},

// TODO: Stellen Sie sicher, dass die Zerstörung einer Mausinstanz nicht mit
// anderen Mausinstanzen in Konflikt gerät
_mouseDestroy: function() {
this.element.unbind( '.' this.widgetName);

// Textauswahl im IE wiederherstellen
($.browser.msie
&& this.element.attr('unselectable', this._mouseUnselectable));
},

_mouseDown: function(event) {
// Lassen Sie nicht zu, dass mehr als ein Widget mit „mouseStart“ umgeht
// TODO: Finden Sie heraus, warum wir originalEvent event.originalEvent = event.originalEvent || {};
if (event.originalEvent.mouseHandled) { return; }

// wir haben möglicherweise Mouseup verpasst (außerhalb des Fensters)
(this._mouseStarted && this._mouseUp(event));

this._mouseDownEvent = event;

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

this.mouseDelayMet = !this.options.delay;
if (!this.mouseDelayMet) {
this._mouseDelayTimer = setTimeout(function() {
self.mouseDelayMet = true;
}, this.options.delay);
}

if (this._mouseDistanceMet(event) && this._mouseDelayMet(event)) {
this._mouseStarted = (this._mouseStart(event) !== false);
if (!this._mouseStarted) {
event.preventDefault();
true zurückgeben;
}
}

// Diese Delegaten sind erforderlich, um den Kontext beizubehalten
this._mouseMoveDelegate = function(event) {
return self._mouseMove(event);
};
this._mouseUpDelegate = function(event) {
return self._mouseUp(event);
};
$(document)
.bind('mousemove.' this.widgetName, this._mouseMoveDelegate)
.bind('mouseup.' this.widgetName, this._mouseUpDelegate);

// präventDefault() wird verwendet, um die Auswahl von Text hier zu verhindern -
// In Safari führt dies jedoch dazu, dass Auswahlfelder nicht mehr auswählbar sind
//, daher ist dieser Fix vorhanden benötigt
($.browser.safari || event.preventDefault());

event.originalEvent.mouseHandled = true;
true zurückgeben;
},

_mouseMove: function(event) {
// IE-Mouseup-Prüfung – Mouseup trat auf, wenn sich die Maus außerhalb des Fensters befand
if ($.browser.msie && !event.button ) {
return this._mouseUp(event);
}

if (this._mouseStarted) {
this._mouseDrag(event);
return event.preventDefault();
}

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

return !this._mouseStarted;
},

_mouseUp: function(event) {
$(document)
.unbind('mousemove.' this.widgetName, this._mouseMoveDelegate)
.unbind(' Mouseup.'this.widgetName, this._mouseUpDelegate);

if (this._mouseStarted) {
this._mouseStarted = false;
this._preventClickEvent = (event.target == this._mouseDownEvent.target);
this._mouseStop(event);
}

false zurückgeben;
},

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

_mouseDelayMet: function(event) {
return this.mouseDelayMet;
},

// Dies sind Platzhaltermethoden, die durch die Erweiterung des Plugins überschrieben werden können.
_mouseStart: function(event) {},
_mouseDrag: function(event) {},
_mouseStop: function(event) {},
_mouseCapture: function(event) { return true; }
};

$.ui.mouse.defaults = {
Abbrechen: null,
Entfernung: 1,
Verzögerung: 0
};

})(jQuery);


ui.sortable.js


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

/*
* jQuery UI Sortable 1.7.1
*
* Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)
* Doppelt lizenziert unter MIT (MIT-LICENSE.txt )
* und GPL-Lizenzen (GPL-LICENSE.txt).
*
* http://docs.jquery.com/UI/Sortables
*
* Hängt davon ab:
* ui.core.js
*/
(function ($) {

$.widget("ui.sortable", $.extend({}, $.ui.mouse, {
_init: function() {

var o = this.options;
this.containerCache = {};
this.element.addClass("ui-sortable">//Get the items
this.refresh( );

//Lassen Sie uns feststellen, ob die Elemente schwebend sind
this.floating = this.items.length ? (/left|right/).test(this.items[0].item.css ('float')) : false;

//Bestimmen wir den Offset des übergeordneten Elements
this.offset = this.element.offset();

/Initialisieren Sie Mausereignisse für die Interaktion
this._mouseInit();

},

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

for ( var i = this.items.length - 1; i >= 0; i-- )
this.items[i].item.removeData("sortable-item");
},

_mouseCapture: function(event, overrideHandle) {

if (this.reverting) {
return false;
}

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

//Wir müssen die Artikeldaten zuerst einmal aktualisieren
this._refreshItems(event);

//Finden Sie heraus, ob der angeklickte Knoten (oder einer seiner übergeordneten Knoten) ein tatsächliches Element in this.items ist
var currentItem = null, self = this, nodes = $(event.target). parent().each(function() {
if($.data(this, 'sortable-item') == self) {
currentItem = $(this);
return false;
}
});
if($.data(event.target, 'sortable-item') == self) currentItem = $(event.target);

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

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

this.currentItem = currentItem;
this._removeCurrentsFromItems();
true zurückgeben;

},

_mouseStart: function(event, overrideHandle, noActivation) {

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

//Wir müssen nur „refreshPositions“ aufrufen, da der Aufruf „refreshItems“ nach „mouseCapture“ verschoben wurde
this.refreshPositions();

//Den sichtbaren Helfer erstellen und anhängen
this.helper = this._createHelper(event);

//Helfergröße zwischenspeichern
this._cacheHelperProportions();

/*
* - Positionsgenerierung -
* Dieser Block generiert alles, was mit der Position zu tun hat – er ist der Kern von Draggables.
*/

//Zwischenspeichern der Ränder des ursprünglichen Elements
this._cacheMargins();

//Das nächste scrollende übergeordnete Element abrufen
this.scrollParent = this.helper.scrollParent();

//Die absolute Position des Elements auf der Seite minus Ränder
this.offset = this.currentItem.offset();
this.offset = {
top: this.offset.top - this.margins.top,
left: this.offset.left - this.margins.left
};

// Erst nachdem wir den Offset erhalten haben, können wir die Position des Helfers auf absolut ändern
// TODO: Es muss noch eine Möglichkeit gefunden werden, eine relative Sortierung zu ermöglichen
this.helper.css („Position“, „absolut“);
this.cssPosition = this.helper.css("position");

$.extend(this.offset, {
click: { //Wo der Klick stattgefunden hat, relativ zum Element
left: event.pageX - this.offset.left,
top: event.pageY - this.offset.top
},
parent: this._getParentOffset(),
relative: this._getRelativeOffset() //Dies ist eine relative zur absoluten Position minus der tatsächlichen Position Berechnung – wird nur für relativ positionierte Helfer verwendet
});

//Generieren Sie die ursprüngliche Position
this.originalPosition = this._generatePosition(event);
this.originalPageX = event.pageX;
this.originalPageY = event.pageY;

//Passen Sie den Mausversatz relativ zum Helfer an, wenn 'cursorAt' angegeben wird
if(o.cursorAt)
this._adjustOffsetFromHelper(o.cursorAt);

//Cache die frühere DOM-Position
this.domPosition = { prev: this.currentItem.prev()[0], parent: this.currentItem.parent()[0] };

//Wenn der Helfer nicht das Original ist, verstecken Sie das Original, damit es beim Ziehen keine Rolle spielt. Auf diese Weise wird nichts Schlimmes verursacht
if(this.helper[0] != this.currentItem[0]) {
this.currentItem.hide();
}

//Erstellen Sie den Platzhalter
this._createPlaceholder();

//Legen Sie eine Eindämmung fest, wenn in den Optionen angegeben
if(o.containment)
this._setContainment();

if(o.cursor) { // Cursoroption
if ($('body').css("cursor")) this._storedCursor = $('body').css(" Cursor");
$('body').css("cursor", o.cursor);
}

if(o.opacity) { // Deckkraftoption
if (this.helper.css("opacity")) this._storedOpacity = this.helper.css("opacity" );
this.helper.css("opacity", o.opacity);
}

if(o.zIndex) { // zIndex-Option
if (this.helper.css("zIndex")) this._storedZIndex = this.helper.css("zIndex" );
this.helper.css("zIndex", o.zIndex);
}

//Scrollen vorbereiten
if(this.scrollParent[0] != document && this.scrollParent[0].tagName != 'HTML')
this.overflowOffset = this.scrollParent.offset();

//Callbacks
this._trigger("start", event, this._uiHash());

//Helfergröße erneut zwischenspeichern
if(!this._preserveHelperProportions)
this._cacheHelperProportions();


//„Aktivieren“-Ereignisse in mögliche Container posten
if(!noActivation) {
for (var i = this.containers.length - 1; i >= 0; i--) { this.containers[i]._trigger("activate", event, self._uiHash(this)); }
}

//Mögliche Droppables vorbereiten
if($.ui.ddmanager)
$.ui.ddmanager.current = this;

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

this.dragging = true;

this.helper.addClass("ui-sortable-helper");
this._mouseDrag(event); //Das Ziehen einmal ausführen – dies führt dazu, dass der Helfer nicht sichtbar ist, bevor er seine richtige Position erreicht hat
return true;

},

_mouseDrag: function(event) {

//Berechnen Sie die Position der Helfer
this.position = this._generatePosition(event);
this.positionAbs = this._convertPositionTo("absolute");

if (!this.lastPositionAbs) {
this.lastPositionAbs = this.positionAbs;
}

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

if((this.overflowOffset.top this.scrollParent[0] .offsetHeight) - event.pageY < o.scrollSensitivity)
this.scrollParent[0].scrollTop = scrolled = this.scrollParent[0].scrollTop o.scrollSpeed;
else if(event.pageY - this.overflowOffset.top < o.scrollSensitivity)
this.scrollParent[0].scrollTop = scrolled = this.scrollParent[0].scrollTop - o.scrollSpeed;

if((this.overflowOffset.left this.scrollParent[0].offsetWidth) - event.pageX < o.scrollSensitivity)
this.scrollParent[0].scrollLeft = scrolled = this.scrollParent [0].scrollLeft o.scrollSpeed;
else if(event.pageX - this.overflowOffset.left < o.scrollSensitivity)
this.scrollParent[0].scrollLeft = scrolled = this.scrollParent[0].scrollLeft - o.scrollSpeed;

} else {

if(event.pageY - $(document).scrollTop() < o.scrollSensitivity)
scrolled = $(document).scrollTop($(document ).scrollTop() - o.scrollSpeed);
else if($(window).height() - (event.pageY - $(document).scrollTop()) < o.scrollSensitivity)
scrolled = $(document).scrollTop($(document ).scrollTop() o.scrollSpeed);

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);

}

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

//Generieren Sie die für Positionsprüfungen verwendete absolute Position neu
this.positionAbs = this._convertPositionTo("absolute");

//Stellen Sie die Hilfsposition ein
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';

//Neu anordnen
for (var i = this.items.length - 1; i >= 0; i--) {

//Variablen und Schnittmenge zwischenspeichern, weiter wenn kein Schnittpunkt
var item = this.items[i], itemElement = item.item[0], Kreuzung = this._intersectsWithPointer(item);
if (!intersection) continue;

if(itemElement != this.currentItem[0] //kann sich nicht mit sich selbst schneiden
&& this.placeholder[intersection == 1 ? "next" : "prev"]()[0] ! = itemElement //keine nutzlosen Aktionen, die zuvor ausgeführt wurden
&& !$.ui.contains(this.placeholder[0], itemElement) //keine Aktion, wenn das verschobene Element das übergeordnete Element des überprüften Elements ist
&& (this.options.type == 'semi-dynamic' ? !$.ui.contains(this.element[0], itemElement) : true)
) {

this.direction = Kreuzung == 1 ? „unten“ : „oben“;

if (this.options.tolerance == "pointer" || this._intersectsWithSides(item)) {
this._rearrange(event, item);
} else {
break;
}

this._trigger("change", event, this._uiHash());
Pause;
}
}

//Ereignisse in Containern veröffentlichen
this._contactContainers(event);

//Mit Droppables verbinden
if($.ui.ddmanager) $.ui.ddmanager.drag(this, event);

//Callbacks
this._trigger('sort', event, this._uiHash());

this.lastPositionAbs = this.positionAbs;
false zurückgeben;

},

_mouseStop: function(event, noPropagation) {

if(!event) return;

//Wenn wir Droppables verwenden, informieren Sie den Manager über den Drop
if ($.ui.ddmanager && !this.options.dropBehaviour)
$.ui.ddmanager.drop(this , Ereignis);

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

self.reverting = true;

$(this.helper).animate({
left: cur.left - this.offset.parent.left - self.margins.left (this.offsetParent[0] == document.body ? 0 : this.offsetParent[0].scrollLeft),
top: cur.top - this.offset.parent.top - self.margins.top (this.offsetParent[0] == document.body ? 0 : this.offsetParent[0].scrollTop)
}, parseInt(this.options.revert, 10) || 500, function() {
self._clear(event);
});
} else {
this._clear(event, noPropagation);
}

false zurückgeben;

},

cancel: function() {

var self = this;

if(this.dragging) {

this._mouseUp();

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

//Deaktivierungsereignisse in Containern posten
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;
}
}

}

//$(this.placeholder[0]).remove(); wäre der jQuery-Weg gewesen – leider löst es ALLE Ereignisse vom ursprünglichen Knoten!
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();

$.extend(this, {
helper: null,
dragging: false,
reverting: false,
_noFinalSort: null
});

if(this.domPosition.prev) {
$(this.domPosition.prev).after(this.currentItem);
} else {
$(this.domPosition.parent).prepend(this.currentItem);
}

true zurückgeben;

},

serialize: function(o) {

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

$(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])});

return str.join('&');

},

toArray: function(o) {

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

items.each(function() { ret.push($(o.item || this).attr(o.attribute || 'id') || ''); });
return ret;

},

/* Seien Sie vorsichtig mit den folgenden Kernfunktionen */
_intersectsWith: function(item) {

var x1 = this.positionAbs.left,
x2 = x1 this.helperProportions.width,
y1 = this.positionAbs.top,
y2 = y1 this.helperProportions.height;

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

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

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

if( this.options.tolerance == "pointer"
|| this.options.forcePointerForContainers
|| (this.options.tolerance != "pointer" && this.helperProportions[this .floating ? 'width' : 'height'] >
} else {

return (l < x1 (this.helperProportions.width / 2) // Rechte Hälfte
&& x2 - (this.helperProportions.width / 2) < r / / Linke Hälfte
&& t < y1 (this.helperProportions.height / 2) // Untere Hälfte
&& y2 - (this.helperProportions.height / 2) < // Obere Hälfte

}
},

_intersectsWithPointer: function(item) {

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();

if (!isOverElement)
false zurückgeben;

dieses.floating zurückgeben?
( ((horizontalDirection && horizontalDirection == "right") || VerticalDirection == "down") ? 2 : 1 )
: ( VerticalDirection && (verticalDirection == "down" ? 2 : 1) );

},

_intersectsWithSides: function(item) {

var isOverBottomHalf = $.ui.isOverAxis(this.positionAbs.top this.offset.click.top, item .top (item.height/2), item.height),
isOverRightHalf = $.ui.isOverAxis(this.positionAbs.left this.offset.click.left, item.left (item.width/2), item.width),
verticalDirection = this._getDragVerticalDirection(),
horizontalDirection = this._getDragHorizontalDirection();

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

},

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

_getDragHorizontalDirection: function() {
var delta = this.positionAbs.left - this.lastPositionAbs.left;
return delta != 0 && (delta > 0 ? "right" : "left");
},

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

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

_getItemsAsjQuery: function(connected) {

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

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]);
}
};
};
}

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]);

for (var i = query.length - 1; i >= 0; i--){
queries[i][0].each(function() {
items. push(this);
});
};

$(items) zurückgeben;

},

_removeCurrentsFromItems: function() {

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

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

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

};

},

_refreshItems: function(event) {

this.items = [];
this.containers = [this];
var items = this.items;
var self = this;
var query = [[$.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();

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);
}
};
};
}

for (var i = query.length - 1; i >= 0; i--) {
var targetData = query[i][1];
var _queries = query[i][0];

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

item.data('sortable-item', targetData); // Daten zur Zielprüfung (Mausmanager)

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

},

refreshPositions: function(fast) {

//Dies muss wiederholt werden, da aufgrund der Verschiebung des Elements aus/in das offsetParent die Position des offsetParent geändert wird wird sich ändern
if(this.offsetParent && this.helper) {
this.offset.parent = this._getParentOffset();
}

for (var i = this.items.length - 1; i >= 0; i--){
var item = this.items[i];

//Wir ignorieren die Berechnung der Positionen aller verbundenen Container, wenn wir nicht über ihnen sind
if(item.instance != this.currentContainer && this.currentContainer && item.item[0] != this .currentItem[0])
continue;

var t = this.options.toleranceElement ? $(this.options.toleranceElement, item.item) : item.item;

if (!fast) {
item.width = t.outerWidth();
item.height = t.outerHeight();
}

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

if(this.options.custom && this.options.custom.refreshContainers) {
this.options.custom.refreshContainers.call(this);
} else {
for (var i = this.containers.length - 1; i >= 0; i--){
var p = this.containers[i].element.offset( );
this.containers[i].containerCache.left = p.left;
this.containers[i].containerCache.top = p.top;
this.containers[i].containerCache.width = this.containers[i].element.outerWidth();
this.containers[i].containerCache.height = this.containers[i].element.outerHeight();
};
}

},

_createPlaceholder: function(that) {

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

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

var el = $(document.createElement(self.currentItem[0].nodeName))
.addClass(className | |. self.currentItem[0].className " ui-sortable-placeholder")
.removeClass("ui-sortable-helper")[0];

if(!className)
el.style.visibility = "hidden";

return el;
},
update: function(container, p) {

// 1. Wenn ein Klassenname als Platzhalteroption festgelegt ist, erzwingen wir keine Größen – dafür ist die Klasse verantwortlich
// 2. Die Option 'forcePlaceholderSize kann aktiviert werden, um sie zu erzwingen, auch wenn ein Klassenname angegeben ist
if(className && !o.forcePlaceholderSize) return;

//Wenn das Element selbst keine tatsächliche Höhe hat (ohne Stile aus einem Stylesheet), erhält es die Inline-Höhe vom gezogenen Element
if(!p.height()) { p.height(self.currentItem.innerHeight() - parseInt(self.currentItem.css('paddingTop')||0, 10) - parseInt(self.currentItem.css('paddingBottom')||0, 10) ); };
if(!p.width()) { p.width(self.currentItem.innerWidth() - parseInt(self.currentItem.css('paddingLeft')||0, 10) - parseInt(self.currentItem. css('paddingRight')||0, 10)); };
}
};
}

//Erstellen Sie den Platzhalter
self.placeholder = $(o.placeholder.element.call(self.element, self.currentItem));

//Hänge es nach dem eigentlichen aktuellen Element an
self.currentItem.after(self.placeholder);

//Aktualisieren Sie die Größe des Platzhalters (TODO: Logic to Fuzzy, siehe Zeile 316/317)
o.placeholder.update(self, self.placeholder);

},

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

if(this._intersectsWith(this.containers[i].containerCache)) {
if(!this.containers[i].containerCache.over) {

if(this.currentContainer != this.containers[i]) {

//Wenn wir einen neuen Container betreten, suchen wir den Artikel mit der geringsten Entfernung und hängen unseren Artikel daneben an
var dist = 10000; var itemWithLeastDistance = null; var base = this.positionAbs[this.containers[i].floating ? 'links': 'oben'];
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 ? 'links': 'oben'];
if(Math.abs(cur - base) < dist) {
dist = Math.abs(cur - base); itemWithLeastDistance = this.items[j];
}
}

if(!itemWithLeastDistance && !this.opt
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage