Heim Web-Frontend js-Tutorial Maus-Drag-Sortierung Li oder Table_jquery, implementiert durch jquery

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

May 16, 2016 pm 04:50 PM
排序 鼠标拖动

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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So sortieren Sie Fotos nach Aufnahmedatum in Windows 11/10 So sortieren Sie Fotos nach Aufnahmedatum in Windows 11/10 Feb 19, 2024 pm 08:45 PM

In diesem Artikel erfahren Sie, wie Sie Bilder nach Aufnahmedatum in Windows 11/10 sortieren und was zu tun ist, wenn Windows Bilder nicht nach Datum sortiert. In Windows-Systemen ist die ordnungsgemäße Organisation von Fotos von entscheidender Bedeutung, um das Auffinden von Bilddateien zu erleichtern. Benutzer können Ordner mit Fotos basierend auf verschiedenen Sortiermethoden wie Datum, Größe und Name verwalten. Darüber hinaus können Sie je nach Bedarf eine aufsteigende oder absteigende Reihenfolge festlegen, um Dateien flexibler zu organisieren. So sortieren Sie Fotos nach Aufnahmedatum in Windows 11/10. Um Fotos nach Aufnahmedatum in Windows zu sortieren, gehen Sie folgendermaßen vor: Öffnen Sie Bilder, Desktop oder einen beliebigen Ordner, in dem Sie Fotos ablegen. Klicken Sie im Menüband auf

So sortieren Sie E-Mails in Outlook nach Absender, Betreff, Datum, Kategorie und Größe So sortieren Sie E-Mails in Outlook nach Absender, Betreff, Datum, Kategorie und Größe Feb 19, 2024 am 10:48 AM

Outlook bietet viele Einstellungen und Funktionen, die Ihnen helfen, Ihre Arbeit effizienter zu verwalten. Eine davon ist die Sortieroption, mit der Sie Ihre E-Mails nach Ihren Bedürfnissen kategorisieren können. In diesem Tutorial erfahren Sie, wie Sie die Sortierfunktion von Outlook verwenden, um E-Mails nach Kriterien wie Absender, Betreff, Datum, Kategorie oder Größe zu organisieren. Dies erleichtert Ihnen die Verarbeitung und das Auffinden wichtiger Informationen und steigert Ihre Produktivität. Microsoft Outlook ist eine leistungsstarke Anwendung, mit der Sie Ihre E-Mail- und Kalenderpläne ganz einfach zentral verwalten können. Sie können ganz einfach E-Mails senden, empfangen und organisieren, während die integrierte Kalenderfunktion es Ihnen erleichtert, den Überblick über Ihre bevorstehenden Ereignisse und Termine zu behalten. Wie man in Outloo ist

XML-Daten mit Python filtern und sortieren XML-Daten mit Python filtern und sortieren Aug 07, 2023 pm 04:17 PM

Implementieren des Filterns und Sortierens von XML-Daten mit Python Einführung: XML ist ein häufig verwendetes Datenaustauschformat, das Daten in Form von Tags und Attributen speichert. Bei der Verarbeitung von XML-Daten müssen wir die Daten häufig filtern und sortieren. Python bietet viele nützliche Tools und Bibliotheken zum Verarbeiten von XML-Daten. In diesem Artikel wird erläutert, wie Sie mit Python XML-Daten filtern und sortieren. Lesen der XML-Datei Bevor wir beginnen, müssen wir die XML-Datei lesen. Python verfügt über viele XML-Verarbeitungsbibliotheken.

PHP-Entwicklung: So implementieren Sie Funktionen zum Sortieren und Paging von Tabellendaten PHP-Entwicklung: So implementieren Sie Funktionen zum Sortieren und Paging von Tabellendaten Sep 20, 2023 am 11:28 AM

PHP-Entwicklung: So implementieren Sie Sortier- und Paging-Funktionen für Tabellendaten. In der Webentwicklung ist die Verarbeitung großer Datenmengen eine häufige Aufgabe. Bei Tabellen, die große Datenmengen anzeigen müssen, ist es normalerweise erforderlich, Datensortierungs- und Paging-Funktionen zu implementieren, um eine gute Benutzererfahrung zu bieten und die Systemleistung zu optimieren. In diesem Artikel wird die Verwendung von PHP zum Implementieren der Sortier- und Paging-Funktionen von Tabellendaten vorgestellt und spezifische Codebeispiele gegeben. Die Sortierfunktion implementiert die Sortierfunktion in der Tabelle und ermöglicht Benutzern die Sortierung in aufsteigender oder absteigender Reihenfolge nach verschiedenen Feldern. Das Folgende ist ein Implementierungsformular

Wie sortiert die Methode Arrays.sort() in Java Arrays nach einem benutzerdefinierten Komparator? Wie sortiert die Methode Arrays.sort() in Java Arrays nach einem benutzerdefinierten Komparator? Nov 18, 2023 am 11:36 AM

Wie sortiert die Methode Arrays.sort() in Java Arrays nach einem benutzerdefinierten Komparator? In Java ist die Methode Arrays.sort() eine sehr nützliche Methode zum Sortieren von Arrays. Standardmäßig sortiert diese Methode in aufsteigender Reihenfolge. Aber manchmal müssen wir das Array nach unseren eigenen definierten Regeln sortieren. Zu diesem Zeitpunkt müssen Sie einen benutzerdefinierten Komparator (Komparator) verwenden. Ein benutzerdefinierter Komparator ist eine Klasse, die die Comparator-Schnittstelle implementiert.

C++-Programm: Ordnen Sie die Position von Wörtern in alphabetischer Reihenfolge neu C++-Programm: Ordnen Sie die Position von Wörtern in alphabetischer Reihenfolge neu Sep 01, 2023 pm 11:37 PM

Bei diesem Problem wird eine Zeichenfolge als Eingabe angegeben und wir müssen die in der Zeichenfolge vorkommenden Wörter in lexikografischer Reihenfolge sortieren. Dazu weisen wir jedem Wort im String einen Index beginnend bei 1 zu (durch Leerzeichen getrennt) und erhalten die Ausgabe in Form sortierter Indizes. String={"Hello","World"}"Hello"=1 "World"=2 Da die Wörter in der Eingabezeichenfolge in lexikografischer Reihenfolge vorliegen, wird in der Ausgabe „12“ ausgegeben. Schauen wir uns einige Eingabe-/Ergebnisszenarien an – vorausgesetzt, alle Wörter in der Eingabezeichenfolge sind gleich, schauen wir uns die Ergebnisse an – Eingabe:{"hello","hello","hello"}Ergebnis:3 Erhaltenes Ergebnis

So sortieren Sie WPS-Ergebnisse So sortieren Sie WPS-Ergebnisse Mar 20, 2024 am 11:28 AM

Bei unserer Arbeit verwenden wir häufig WPS-Software. Es gibt viele Möglichkeiten, Daten in WPS-Software zu verarbeiten, und die Funktionen sind auch sehr leistungsfähig. Wir verwenden häufig Funktionen, um Durchschnittswerte, Zusammenfassungen usw. zu ermitteln Methoden, die für statistische Daten verwendet werden können, wurden für alle in der WPS-Softwarebibliothek vorbereitet. Nachfolgend stellen wir die Schritte zum Sortieren der Ergebnisse in WPS vor. Nachdem Sie dies gelesen haben, können Sie aus der Erfahrung lernen. 1. Öffnen Sie zunächst die Tabelle, die eingestuft werden soll. Wie nachfolgend dargestellt. 2. Geben Sie dann die Formel =rank(B2, B2: B5, 0) ein und achten Sie darauf, 0 einzugeben. Wie nachfolgend dargestellt. 3. Drücken Sie nach Eingabe der Formel die Taste F4 auf der Computertastatur. In diesem Schritt wird der relative Bezug in einen absoluten Bezug umgewandelt.

So ordnen Sie mehrere Spalten in Power Query per Drag & Drop neu an So ordnen Sie mehrere Spalten in Power Query per Drag & Drop neu an Mar 14, 2024 am 10:55 AM

In diesem Artikel zeigen wir Ihnen, wie Sie mehrere Spalten in PowerQuery per Drag & Drop neu anordnen. Beim Importieren von Daten aus verschiedenen Quellen kann es vorkommen, dass die Spalten nicht in der gewünschten Reihenfolge vorliegen. Durch die Neuordnung von Spalten können Sie diese nicht nur in einer logischen Reihenfolge anordnen, die Ihren Analyse- oder Berichtsanforderungen entspricht, sondern verbessert auch die Lesbarkeit Ihrer Daten und beschleunigt Aufgaben wie Filtern, Sortieren und Durchführen von Berechnungen. Wie ordne ich mehrere Spalten in Excel neu an? Es gibt viele Möglichkeiten, Spalten in Excel neu anzuordnen. Sie können einfach die Spaltenüberschrift auswählen und an die gewünschte Stelle ziehen. Dieser Ansatz kann jedoch umständlich werden, wenn es um große Tabellen mit vielen Spalten geht. Um Spalten effizienter neu anzuordnen, können Sie den erweiterten Abfrageeditor verwenden. Erweiterung der Abfrage

See all articles