//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); },
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); }
// TODO: Getter- und GetterSetter-Eigenschaften aus Widget-Prototyp // und Plugin-Prototyp zusammenführen$[namespace][name].getterSetter = 'option'; };
// 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]; } }
// 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));
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());
_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(); }
// 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; } };
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();
//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);
/* * - 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);
//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 ($.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') {
//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) ) {
//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();
//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(); }; }
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--){
//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]; } }
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
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
