搜尋
首頁web前端js教程jquery實作的滑鼠拖曳排序Li或Table_jquery

1、前端頁

複製程式碼 程式碼如下:






廣告管理







//新增廣告
function addlinks() {
editWidget( "PhoneArticleListPageInsOrUp.aspx");
}
腳本>

$(function () {
$('.sortable') .sortable({ 遊標: '移動' });
});
腳本>

//編輯
function editlink( prefix, aftfix, obj) {
editWidget("PhoneArticleListPageInsOrUp.aspx?ID=" obj);
}
腳本>

function getsortresult(prefix, aftfix) {
var flag = document.getElementById("" prefix "_sortable_" aftfix "");
if (flag) {
var result = $("#" prefix " _sortable_" aftfix "").sortable('toArray');
$(":button").attr("已停用", "已停用"); $(":提交").attr("已停用", "已停用");
$("#delay_" prefix "_" aftfix "").show();
$("#normal_" 前綴"_" 後綴"").hide ();
$.ajax({
url: "PhoneArticleListPage_2.aspx?word=" result,
快取: false,
成功: 函數(html) {
$("# delay_" 字首"_" aftfix "").hide();
$("#normal_" prefix "_" aftfix "").show();
$(":button").removeAttr( "已停用" ); $(":提交").removeAttr("已停用");
警報(標誌);
alert("手機文章清單排列順序保存成功! ");
}
else {
alert("不需要排序的手機文章清單!");
return false;
}
}














表>
表格>
身體>



2、CSS樣式

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

body,div,dl,dt, dd,ul,ol,li ,h1,h2,h3,h4,h5,h6,pre,代碼,表單,字段集,圖例,輸入,按鈕,文字區域,p,區塊引用,th,td{邊距:0;填充: 0;}
table{border-collapse:collapse;border-spacing:0;}
ol,ul{list-style:none;}

a{color:#333;text-裝飾:無;}
a:hover{顏色:#f30;text-decoration:底線}

body{font-family:"宋體",Arail,verdana;font-size:12px;line -高度: 1.5em;顏色:#222;背景:#fff ;}


.clearfix:after{內容:".";顯示:塊;高度:0;清除:兩者;可見性: 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 { 上邊距:5px;}.mr5 { 右邊距:5px;}.mb5 { 下邊距:5px;}.ml5 { 左邊距:5px;}
.mt10 { 邊距-頂部:10px; }.mr10 { 右邊距:10px;}.mb10 { 底邊距:10px;}.ml10 { 左邊距: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:1pxsolid #ccc;border-radius:3px;padding:1px 2px;}

/*輸入框*/
輸入:-moz-placeholder,textarea:-moz-placeholder {color: #999999;}
輸入:-ms-input-placeholder,textarea:-ms-input-佔位元符{顏色:#999999;}
輸入::-webkit-input-placeholder,textarea::-webkit-input-placeholder {顏色:#999999;}

.txt,textarea,input [ type="text"], input[type="password"] {border: 1pxsolid #ccc;box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;transition: 邊框0.2s 線性0s, box-shadow 0.2s 線性0s;border-radius:3px;padding:2px 3px;}
.txt:focus,textarea:focus,input[type="text"]:focus, input[type="password" ]:focus {邊框: 1pxsolid #2C5193;box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) 插圖, 0 0 8px rgba(44, 81, 147, 0.6);字型大小:12px;行高:18px;}
.txt20{寬度:20px;}
.txt30{寬度:30px;}
.txt50{寬度:50px;}
.txt寬度:75px;}
.txt85{寬度:85px;}
.txt100{寬度:100px;}
.txt125{寬度:125px;}
.txt150{寬度:150px ; 🎜>.txt175{寬度:175px;}
.txt200{寬度:200px;}
.txt:250{寬度:250px;}
.txt280{寬度}280px;; :300px;}
.txt350{寬度:350px;}
.txt400{寬度:400px;}

/*標準表格*/
.fn-table{寬度:100% ;}
.fn-table>tbody>tr>td{padding:3px;背景:#fff;邊框:1px 實體#CEDCED;}
.fn-table>tbody>tr>th{背景:# E3F5FF;填充:2px;邊框:1px 實心#CEDCED;字體粗細:粗體;}

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

/*細線表格*/
.fn-table-line>tbody>tr>td{}

/*滑鼠懸停錶格*/
.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) {背景:#E3F5FF;文字對齊:右;字體粗細:粗體;}
.fn-table-function>tbody>tr>td:first-child{背景:#E3F5FF;文字- align:right;font -weight:bold;}

/*乾淨的表格*/
.fn-table-clear{}
.fn-table-clear>tbody>tr>td{填充:3px;背景:#fff;邊框:無;}
.fn-table-clear>tbody>tr>th{背景:#E3F5FF;填滿:3px;邊框:無;}

/*iframe 頭部樣式,僅後台部分案例*/
.fn-iframe-hd{padding:2px 5px;background:#2C5193;margin-bottom:30px;line-height:22px;height:22px;color :#fff;位置:固定;左:0;頂部:0;寬度:100%;}
.fn-iframe-hd .close{background:url(/Manager/Themes/images/icons/filled.png ) 無重複中心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:1pxsolid #2C5193;border-radius :border-radius : 5px 5px 0 0;遊標:指標;背景:#2C5193;顏色:#fff;}
.fn-tab .hd li.on{背景:#4B8AF9;顏色:#fff;邊框:1px 實心#4B8AF9 ; border-bottom:0;}
.fn-tab .bd{border:1pxsolid #ddd;padding:3px;margin-top:-1px;}
.fn-tab .bd div.item{顯示:無;}
.fn-tab .bd div.on{display:block;}

/*搜尋框*/
.fn-searchbar{border:1pxsolid #CEDCED; padding:2px ;border-radius:3px;}
.fn-searchbar 輸入,.fn-searchbar select{vertical-align:middle;}

/*分頁*/
.fn-分頁器{背景:#E3F5FF;邊框:1px 實心#CEDCED;邊距:0 0 5px;邊框頂部:0;}
.fn-分頁器div{行高:26px;空白:nowrap;word-中斷:break- all;}
.fn-pager input{margin-left:5px;}
.fn-pager a{border:1pxsolid #E3F5FF;; {背景:#2C5193;邊框:1px Solid #2C5193;顏色:#fff;padding:3px 5px;font-weight:bold;}
.fn-pager a:hover{背景:#2C5193 ;邊框:1px 實心:1px #2C5193;顏色:#fff;}
.fn-pager 輸入,.fn-pager 選擇,.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輸入[type='提交']{邊框半徑:3px;填充:1px 2px;邊框:1px 實心#B3B3B3;遊標:指針;背景圖像:線性漸變(到底部,#fff, #e6e6e6);框陰影:0 1px 0 rgba(255, 255, 255, 0.2) 插圖,0 1px 2px rgba(0, 0, 0, 0.05);顏色:#666;行高:20px;垂直對齊:中間;文字裝飾:無;填充: 1px 3px ;}
a.btn{填充:3px 6px;}
.btn:hover{背景:#eee;文字裝飾:無;}

.btn-on,.fn- pager input[type='submit']{背景圖像:線性漸變(到底部,#4b8af9,#2C5193);顏色:#fff;邊框顏色:rgba(0, 0,0,0.1) rgba(0,0, 0,0.1) rgba(0,0,0,0.1);背景顏色:#2C5193;邊框:1px 實心#2C5193 ;}
.btn-on:懸停,.fn-pager 輸入[type='提交']:懸停{背景:#4b8af9;顏色:#fff;}

.btn-gray{背景:線性漸變(到底部,#ccc ,#effefef);顏色:#fff;邊框顏色:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.1);遊標:不允許;}
.btn-gray:hover{背景: #eee;text-decoration:none;}

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

#tooltip{位置:絕對;邊框:1px 實心#333;背景:#f7f5d1;填滿:2px 5px ;顏色:#333;顯示:無;寬度:500px; }
#tooltip{位置:絕對;顏色:#333;顯示:塊;背景顏色:#fff;邊框:1px 實心#555;框-陰影:0 0 10px rgba(0,0,0,.3 );邊框半徑:5px;填充:3px;最小寬度:160px;最小高度:80px;}
#tooltip img{邊框半徑:5px;}

/*文字大小*/
.font12{font-size:12px;}
.font13{font-size:13px;}
.font14{font-大小:14px;}
.font15{字體大小:15px;}
.font16{字體大小:16px;}
.font17{字體大小:17px;}
.font18{ font-size:18px;}
/*文字顏色*/
.font- red{顏色:紅色;}
.font-green{顏色:綠色;}
.font-white{顏色:白色;}
.font-gray{顏色:灰色;}

/*滑鼠標記*/
.hand{遊標:指標;}


3.主要js

jquery.js

ui.core .js

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

/*
* jQuery UI 1.7.1
*
*版權所有(c) 2009 AUTHORS.txt (http://jqueryui.com/about)
* 取得MIT 雙重授權(MIT-LICENSE.txt)
* 和GPL (GPL-LICENSE.txt) 許可證。
*
* http://docs.jquery.com/UI
*/
;jQuery.ui || (function($) {

var _remove = $. fn.remove,
isFF2 = $.browser.mozilla && (parseFloat($.browser.version)
//輔助函數與ui 物件
$.ui = {
version: "1.7.1",

// $.ui.plugin 已棄用,請改用代理模式。集合) {
var proto = $.ui[module].prototype;
for(var i in set) {
proto .plugins[i] = proto.plugins[i] || []; proto.plugins[i].push([選項, set[i]]); >call: function(instance, name, args) {
var set = instance.plugins[name];
if(! set || !instance.element[0].parentNode) { return; >
for (var i = 0; i if (instance.options[set[i][ 0]]) {
set[i][1] .apply(instance.element, args);
}
}
}
},

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

hasScroll: function(el, a) {

//如果overflow被隱藏,元素可能有多餘的內容,但是使用者想要隱藏它
if ($(el).css ('overflow') == 'hidden') { return false ; }

var 捲動= (a && a == '左') ? 'scrollLeft' : 'scrollTop',
has = false ;

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

// TODO:確定哪些情況實際上會導致這種情況發生
// 如果元素沒有設定滾動,看看是否可以
// 設定滾動
el[滾動] = 1;
has = (el[scroll] > 0);
el[滾動] = 0;
回報有;
},

isOverAxis: function(x, reference, size) {
//判斷x座標何時超過「b」元素軸
return (x > reference) && ( x },

isOver: function(y, x, top, left, height, width) {
//判斷x,y座標何時超過「b」元素
return $ .ui.isOverAxis(y, 頂部, 高度) && $.ui.isOverAxis(x, 左, 寬度);
},

keyCode: {
退格: 8,
CAPS_LOCK: 20,
逗號: 188 ,
控制: 17,
刪除: 46,
向下:40,
結束:35,
輸入:13,
退出:27,
家:36 ,
插入:45,
左:37,
NUMPAD_ADD:107,
NUMPAD_DECIMAL:110,
NUMPAD_DIVIDE:111,
MPAMPAD_ENTER>NUMPAD_DIVIDE:111,
MPAMPAD_ENTER>NUMPAD_DIVIDE:111,
NUMPAD_ENTER:10860010707070303:7070707070703:0307070703:0303:NUFFS:10800001373:20707073:03033:0373:033:F37>
NUMPAD_SUBTRACT:109,
PAGE_DOWN:34,
PAGE_UP:33,
句點:190,
右:39,
SHIFT:16,
空格:空格: 🎜>TAB:9,
向上:38
}
};

// WAI-ARIA 標準化
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 !== undefined;

return (name == 'role'
? (set
? attr.call(this, elem, name, "wairole:" value)
: (attr.apply(this , 參數) || "").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, argument))) ;
};

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

//jQuery 外掛程式
$.fn.extend>
//jQuery 外掛程式
$.fn.extend>
//jQuery 外掛程式
$.fn.extend ({
remove: function() {
// Safari 有一個原生的移除事件,它實際上會移除DOM 元素,
// 所以我們必須使用triggerHandler 而不是trigger (#3037 )
$("*", this).add(this).each(function() {
$(this).

enableSelection: function() {
回傳這個
.attr('不可選擇', '關閉')
.css('MozUserSelect', '')
.unbind('selectstart.ui')
},

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

scrollParent: function() {
varscrollParent;
if(($.browser.msie && (/(static|相對)/). 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(這, '溢出',1) $.curCSS(這,'溢出-y',1) $.curCSS(這,'溢出-x',1));
}).eq(0);
} else {
scrollParent = this.parents().filter(function() {
return (/(auto|scroll)/).test($.curCSS(this,'overflow',1) ) $ .curCSS(this,'overflow-y',1) $.curCSS(this,'overflow-x',1));
}).eq(0);
}

return (/fixed/).test(this.css('position')) || !scrollParent.length ? $(文檔) : 滾動父級;
}
});


//附加選擇器
$.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)
: !isNaN(tabIndex))
// 元素及其所有祖先必須可見
/ / 瀏覽器可能會報告該區域被隱藏
&& !$(element)['area' == nodeName ? 'parents' : 'closest'](':hidden').length; 🎜>
tabable: function(element) {
var tabIndex = $.attr(element, 'tabindex');
return (isNaN(tabIndex) || tabIndex >= 0) && $(element ).is(':可聚焦');
}
});


// $.widget 是一個創建jQuery 插件的工廠
// 從插件程式碼中取出一些樣板程式碼
function getter(namespace, plugin, method, args) {
function getMethods(type) {
varmethods = $[namespace][plugin][type] || [];
return(typeofmethods=='string'?methods.split( /,?s/):methods);
}

varmethods = getMethods('getter');
if (args.length == 1 && typeof args[0] == 'string ') {
methods =methods.concat(getMethods('getterSetter'));
}
return ($.inArray(方法, 方法) != -1);
}

$.widget = 函數(name, 原型) {
var 命名空間= name.split(".")[0];
name = name.split(".")[ 1];

// 建立外掛方法
$.fn[name] = function(options) {
var isMethodCall = (typeof options == 'string'),
args = Array.prototype .slice.call(參數, 1);

// 阻止呼叫內部方法
if (isMethodCall && options.substring(0, 1) == '_') {
return this;
}

// 處理getter 方法
if (isMethodCall && getter(namespace, name, options, args)) {
var instance = $.data(this(this[000 ], name );
return (instance ? instance[options].apply(instance, args)
: undefined);
}

// 處理初始化和非getter 方法
return this.each(function() {
var instance = $.data(this, name);

// 建構子
(!instance && !isMethodCall &&
$. data(this, name, new $[namespace][name](this, options))._init()); 🎜>// 方法呼叫
(instance && isMethodCall && $.isFunction(instance[options]) &&
instance[options].apply(instance, args))
});
};

// 建立小元件建構子
$[namespace] = $[namespace ] || {};
$[命名空間][名稱] = 函數(元素, 選項) {
var self = this;

this.namespace = 命名空間;
this .widgetName = 名稱;
this.widgetEventPrefix = $[命名空間][名稱].eventPrefix ||名稱;
this.widgetBaseClass = 命名空間'-' 名稱;

this.options = 命名空間'-' 名稱;

this.options = $.extend({},
$.widget.defaults,
$[namespace][name].defaults,
$.metadata && $.metadata。 get(元素)[名稱],
選項);

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

// 新增小部件原型
$[namespace][name].prototype = $.extend( {}, $.widget.prototype, prototype);

// TODO:合併小部件原型的getter 和getterSetter 屬性
// 和外掛程式原型
$[namespace][name]. getterSetter = 'option';
};

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

選項: 函數(鍵, 值) {
var options = key,
self = this;

if (typeof key == "string") {

if (typeof key == "string") {
if (value === undefined) {
return this._getData(key);
}
選項= {};
選項[鍵] = 值;
}

$.each(選項, 函數(鍵, 值) {
self._setData(鍵, 值);
});
},
_getData: function(key) {
return this.options[key];
},
_setData: function(key, value) {
this.options[key] = value;

if (key == '停用') {
this.element
[值? '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
類型:this.widgetEventPrefix 類型);

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

// 將原始事件屬性複製到新事件
// 如果我們可以呼叫$.event.fix 而不是$.Event
//就會發生這種情況
// 但我們沒有強制多次修復事件的方法
if (event.originalEvent) {
for (var i = $.event.props.length, prop; i ;) {
prop = $. event.props[--i];
event[prop] = event.originalEvent[prop];
}
}

this. element.trigger(事件, 資料);

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

$.widget.defaults = {
停用: false
};



** *滑鼠互動插件 **/

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

this.element
.bind ('mousedown.' this.widgetName, function(event) {
return self._mouseDown(event);
})
.bind( '點擊。 ' this.widgetName, function(event) {
if(self._preventClickEvent) {
self._preventClickEvent = false;
event.stopImmediatePropagation()
回傳false; } };

// 阻止IE 中的文字選擇
if ($.browser.msie) {
this._mouseUnselectable = this.element.attr('unselectable');
this.element .attr('不可選擇', '開啟'); } this.started = false; },

// TODO:確保銷毀一個滑鼠實例不會幹擾
// 滑鼠的其他實例
_mouseDestroy: function() {
this.element.unbind( '.' this .widgetName);

// 恢復IE 中的文字選擇
($.browser.msie
&& this.element.attr('unselectable', this._mouseUnselectable));
},

_mouseDown: function(event) {
// 不要讓多個小部件處理mouseStart
// TODO:弄清楚為什麼我們必須使用originalEvent
事件.originalEvent = 事件.originalEvent || {};
if (event.originalEvent.mouseHandled) { return; }

// 我們可能錯過了mouseup(在視窗外)
(this._mouseStarted && this. _mouseUp(event));

this._mouseDownEvent = 事件;

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

this.mouseDelayMet = !this.options.delay;
if (!this.mouseDelayMet.motions. ) {
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.preDefault ();
回傳真;
}
}

// 這些委託需要保留上下文
this._mouseMoveDelegate = function(event) {
return self._mouseMove( event);
};
this._mouseUpDelegate = function(event) {
return self._mouseUp(event);
};
$(文檔)
.bind(' mousemove.' this.widgetName, this._mouseMoveDelegate)
.bind('mouseup.' this.widgetName, this._mouseUpDelegate);

// PreventDefault() 用於阻止此處選擇文字-
// 但是,在Safari 中,這會導致選擇框不再可選
//,因此此修復是需要
($.browser.safari || event.preventDefault());

event.originalEvent.mouseHandled = true;
回傳真;
},

_mouseMove: function(event) {
// IE mouseup 檢查- 當滑鼠離開視窗時發生mouseup
if ($.browser.msie && !event.button ) {
回傳this._mouseUp(event);
}

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

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

return !this._mouseStarted;
},

_mouseUp: 函數(事件) {
$(文檔)
.unbind('mousemove.' this.widgetName, this ._mouseMoveDelegate)
.unbind(' mouseup.' this.widgetName, this._mouseUpDelegate);

if (this._mouseStarted) {
this._mostStarted = false; = (event.target == this._mouseDownEvent.target);
this._mouseStop(事件);
}

回傳false;
},

回傳false;
},
_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
;


; 🎜>// 這些是佔位符方法,可以透過擴充插件來覆寫
_mouseStart: function(event) {},
_mouseDrag: function(event) {},
_mouseStop: 函數(事件) {},
_mouseCapture: 函數(事件) { return true; }
};

$.ui.mouse.defaults = {
取消: null,
距離: 1 ,
延遲: 0
};

})(jQuery);


ui.sortable.js


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

/*
* jQuery UI Sortable 1.7.1
*
* 版權所有(c) 2009 AUTHORS.txt ( http://jqueryui.com/about)
* MIT 雙重授權(MIT-LICENSE.txt )
* 和GPL (GPL-LICENSE.txt) 授權。
*
* http://docs.jquery.com/UI/Sortables
*
* 取決於:
* ui.core.js
*/
( function ($) {

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

var o = this.options;
this.containerCache = {};
this.element.addClass("ui-sortable");

//取得項目
this.refresh( );

//判斷項目是否浮動
this.floating = this.items.length ? (/left|right/).test(this.items[0].item.css ('float ')) : false;

//確定父級的偏移量
this.offset = this.element.offset();
//初始化滑鼠事件互動this._mouseInit()},

destroy: function() {
this.element
.removeClass("ui-sortable ui-sortable-disabled")
.removeData("sortable")
.解除綁定(".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;

//我們必須先刷新一次項目資料
this._refreshItems(event);

//找出被點擊的節點(或其父節點之一)是否是this.items 中的實際項目
var currentItem = null, self = this,nodes = $(event.target). parents().each(function() {
if($.data(this, 'sortable-item') == self) {
currentItem = $(this);
return false;
}
});
if($.data(event.target, 'sortable-item') == self) currentItem = $(event.target);

if(!currentItem) 回傳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) 回傳false;
}

this.currentItem = currentItem;
this._removeCurrentsFromItems();
傳回真;


_mouseStart: function(event, overrideHandle, noActivation) {

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

//我們只需要調用refreshPositions ,因為refreshItems呼叫已經移至mouseCapture
this.refreshPositions();

//建立並追加可見的helper
this.helper = this._createHelper(event);

//快取helper大小
this._cacheHelperProportions();

/*
* - 位置產生-
* 該區塊產生與位置相關的所有內容- 它是可拖曳的核心。
*/

//快取原始元素的邊距
this._cacheMargins();

//取得下一個滾動父級
this.scrollParent = this. .helper.scrollParent();

//元素在頁面上的絕對位置減去邊距
this.offset = this.currentItem.offset();
this.offset = {
top: this.offset.top - this.margins.top,
left: this.offset.left - this.margins.left
};

// 只有在獲得偏移量後,我們才能將助手的位置更改為絕對
// TODO:仍然需要找到一種方法來實現相對排序
this.helper.css (“位置”,“絕對”);
this.cssPosition = this.helper.css("position");

$.extend(this.offset, {
click: { //點擊發生的位置,相對於元素
left : event.pageX - this.offset.left,
top: event.pageY - this.offset.top
},
parent: this._getParentOffset(),
relative: this._getRelativeOffset( ) //這是相對於絕對位置減去實際位置計算- 僅用於相對定位助手
});

//產生原始位置
this.originalPosition = this._generatePosition(event );
this.originalPageX = event.pageX;
this.originalPageY = event.pageY;

//如果提供了'cursorAt',則調整滑鼠相對於助手的偏移
if(o.cursorAt)
this._adjustOffsetFromHelper(o.cursorAt);

//快取前一個DOM 位置
this.domPosition = { prev: this.currentItem.prev()[ 0],parent: this.currentItem.parent()[0] };

//如果helper不是原來的,則隱藏原來的,這樣在拖曳過程中它就不會發揮任何作用,這樣不會造成任何不好的結果
if(this.helper[0] != this.currentItem[0]) {
this.currentItem.hide();
}

//建立佔位符
this._createPlaceholder();

//如果在選項中給定則設定包含
if(o.containment)
this._setContainment() ;

if(o.cursor) { // 遊標選項
if ($('body').css("cursor")) this._storedCursor = $('body').css( "遊標」);
$('body').css("cursor", o.cursor);
}

if(o.opacity) { // 不透明度選項
if (this.helper.css("opacity")) this._storedOpacity = this.helper.css("opacity" );
this.helper.css("不透明度", o.opacity);
}

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

//準備滾動
if(this.scrollParent[0] != document && this.scrollParent [0].tagName != 'HTML')
this.overflowOffset = this.scrollParent.offset();

//呼叫回呼this._trigger("start", event, this ._uiHash()); //重新快取助理大小if(!this._preserveHelperProportions) this._cacheHelperProportions(); if(!noActivation) { for (var i = this.containers.length - 1; i >= 0; i--) { this.containers[i]. _trigger("activate", event, self._uiHash(this)); } }

//準備可能的droppables
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(事件); //執行一次拖曳- 這會導致助手在獲得正確位置之前不可見
return true;

},

_mouseDrag: function(event) {

//計算助理位置
this.position = this._generatePosition(event);
this.positionAbs = this._convertPosition(event);
this.positionAbs = this._convertPosition("absolute");

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

//進行滾動
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 this.scrollParent[0].scrollTop = 捲動= this.scrollParent[0].scrollParent[0].scrollTop = 捲動= this.scrollParent[0].scrollParent[0].scrollTop = 滾動= this.scrollParent[0].scrollParent o .scrollSpeed;
else if(event.pageY - this.overflowOffset.top this.scrollParent[0].scrollTop = 滾動= this.scrollParent[0].scrollTopop - o.scroll;

if((this.overflowOffset.left this.scrollParent[0].offsetWidth) - event.pageX this.scrollParent[0].scrollLeft = 滾動= this. 0].scrollLeft o.scrollSpeed;
else if(event.pageX - this.overflowOffset.left this.scrollParent[0].scrollLeft = 捲動= this.scrollParent[0].scrollParent[0].scrollLeft = 滾動= this.scrollParent[0].scrollParft - o.scrollSpeed;

} else {

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

if(event.pageX - $(document).scrollLeft() 滾動= $(document).scrollLeft($(document).scrollLeft() - o.scrollSpeed );
else if($(window).width() - (event.pageX - $(document ).scrollLeft()) scrolled = $(document).scrollLeft($(document) ).scrollLeft() o.scrollSpeed);

}

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

//重新生成用於位置檢查的絕對位置
this.positionAbs = this._convertPositionTo("absolute");

//設定輔助位置
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';

//重新排列
for (var i = this.items.length - 1; i >= 0; i--) {

//快取變數和交集,繼續如果沒有交集
var item = this.items[i], itemElement = item.item[0], junction = this. _intersectsWithPointer(item);
if (!intersection) 繼續;

if(itemElement != this.currentItem[0] // 不能與自身相交
&& this.placeholder[intersection == 1 ? "next" : "prev"]()[0] ! = itemElement //沒有
之前做過的無用操作&& !$.ui.contains(this.placeholder[0], itemElement) //如果移動的項目是選取的項目的父項,則不執行任何操作
&& (this.options.type == '半動態' ? !$.ui.contains(this.element[0], itemElement) : true )
) {

this.direction = 交集== 1 ? “下”:“上”;

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

this._trigger("更改", 事件,"更改", 事件,"更改", 事件,"更改", 事件,"更改", 事件,"更改"," this._uiHash());
休息;
}
}

//將事件發佈到容器
this._contactContainers(event);

/ /與droppables互連
if($.ui.ddmanager) $.ui.ddmanager.drag(this, event);

//呼叫回呼
this._trigger('sort', event, this._uiHash());

this.lastPositionAbs = this.positionAbs;
回傳錯誤;

},
_mouseStop: function(event, noPropapa ) {

if(!event) return;

//如果我們使用droppables,通知管理器drop
if ($.ui.ddmanager && !this.options.dropBehaviour)
$.ui.ddmanager.drop(this , 事件);

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,函數(){
self._clear(事件);
});
} else {
this._clear(event, noPropagation);
}

回傳false;

},

cancel: function() {

var self = this;
if(this.dragging) {

this._mouseUp();

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

//將停用事件發佈到容器
for

//將停用事件發佈到容器
for (var i = this.containers.length - 1; i >= 0; i--){
this.containers[i]. _trigger("停用", 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();本來是jQuery 方式-不幸的是,它從原始節點解除所有事件的綁定!
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,
拖曳: false,
恢復: false,
_noFinalSort: null
});

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

回傳true;

},

序列化: function(o) {

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

$(items).each(function() {
var res = ($(o.item || this).attr(o.attribute || 'id') || '') .match (o.表達式|| (/(. )[-=_](. )/));
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 = [];奧= 奧|| {};

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

},

/* 注意以下核心函數*/
_intersectsWith: function(item) {

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

var l = this.helperProportions.height;

var l = item.left,
var l = item.left,
var l = item.left, 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) l && (x1 dxClick)
if ( this.options.tolerance == "指針"
|| this.options.forcePointerForContainers
|| (this.options.tolerance != "指針" && this.helperProportions[this .floating ? 'width' : 'width' : 'width' : 'width' : 'width' : 'width' : ? 'height'] > item[this.floating ? 'width' : 'height'])
) {
return isOverElement;
} else {

return (l && x2 - (this.helperProportions.width / 2) && t && y2 - (this.helperProportions.height / 2)
}
},

_intersectsWithPointer: function (item) {

var isOverElementHeight = $.ui.isOverAxis(this.positionAbs.top this .offset.click.top, item.top, item.height),
isOverElementWidth = $.. isOverAxis(this.positionAbs.left this.offset.click.left, item.left, item.width),
isOverElement = isOverElementHeight && isOverElementWidth,
verticalDirectionrag .vertical ntalDirection = this._getDragHorizo​​ntalDirection();

if (!isOverElement)
回傳false;

回傳this.floating ?
( ((horizo​​ntalDirection && 水平方向== "右") || 垂直方向== "下") ? 2 : 1 )
: ( 垂直方向&& (verticalDirection == "下" ? 2 : 1) );

},

_intersectsWithSides: function(item) {

var isOverBottomHalf = $.ui.isOverAxis(this position.Absset. .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(),
horizo​​ntalDirection = this._getDragHorizo​​​​ntalDirection();
(🎜. && Horizo​​ntalDirection) {
return ((horizo​​ntalDirection == "right" && isOverRightHalf) || (horizo​​ntalDirection == "left" && !isOverel {Half));
); } ); } 🎜>返回verticalDirection && ((verticalDirection == "down" && isOverBottomHalf) || (verticalDirection == "up" && !isOverBottomHalf)); } }},

_getDragVerticalDirection: function() {
var delta = this.positionAbs.top - this.lastPositionAbs.top;
返回delta != 0 && (delta > 0 ? "向上");
},

_getDragHorizo​​ntalDirection: function() {
var delta = this.positionAbs.left - this.lastPositionAbs.left
0 ? "右" : "左");
},

刷新:函數(事件){
this._refreshItems(事件);
this.refreshPositions ();
},

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

_getItemsAsjQuery: function(connected) {

var ): function(connected) {

var self = this var 查詢= [];
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) ) : $(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 = requests.length - 1; i >= 0; i--){
queries[i][0].each(function() {
items.推(這個)
});
};

返回$(物品);

},

_removeCurrentsFromItems: function() {

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

for (var i=0; i
for (var j=0; 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 查詢= [[$.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 = requests.length - 1; i >= 0; i--) {
var targetData = requests[i][1];
var _queries = 查詢[i][0];

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

item.data('sortable-item', targetData); // 目標檢查資料(滑鼠管理員)

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

refreshPositions: function(fast) {

//必須重做,因為由於項目移出/移入offsetParent,offsetParent 的位置將會改變
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];

//當我們不在所有連接的容器上方時,我們忽略計算它們的位置
if(item.instance ! = this.currentContainer && this.currentContainer && item.item[0] != this .currentItem[0])
繼續;

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 ||這個,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 = "隱藏";

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

// 1. 如果將className 設為'placeholder 選項,我們不會強制指定大小- 類別對此負責
// 2. 即使指定了類名,也可以啟用選項'forcePlaceholderSize 來強制它
if(className && !o.forcePlaceholderSize) return;

//如果元素本身沒有實際高度(沒有來自樣式表的樣式),它將從拖曳的項目接收內聯高度
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)); };
}
};
}

//建立佔位符
self.placeholder = $(o.placeholder.element.call(self.element, self.currentItem));

//追加到當前實際item之後
self.currentItem.after(self.placeholder);

//更新佔位符的大小(TODO:邏輯模糊,見第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]) {

//當進入一個新容器時,我們會找到距離最近的項目,並將我們的項目附加到它附近
var dist = 10000; var itemWithLeastDistance = null; var base = this.positionAbs[this.containers[i].floating ? '左' : '上'];
for (var j = this.items. length - 1; j >= 0; j--) {
if(!$.ui.contains(this.containers[i].element[0] , this.items[j].item[0]) ) 繼續;
var cur = this.items[j][this.containers[i].floating ? '左' : '上'];
if(Math.abs(cur - 基數) dist = Math.abs(cur - 基數); itemWithLeastDistance = this.items[j];
}
}

if(!itemWithLeastDistance && !this.

value="保存顺序" />

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




陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
了解JavaScript引擎:實施詳細信息了解JavaScript引擎:實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要,因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段;2)執行過程中,引擎會進行動態優化,如內聯緩存和隱藏類;3)最佳實踐包括避免全局變量、優化循環、使用const和let,以及避免過度使用閉包。

Python vs. JavaScript:學習曲線和易用性Python vs. JavaScript:學習曲線和易用性Apr 16, 2025 am 12:12 AM

Python更適合初學者,學習曲線平緩,語法簡潔;JavaScript適合前端開發,學習曲線較陡,語法靈活。 1.Python語法直觀,適用於數據科學和後端開發。 2.JavaScript靈活,廣泛用於前端和服務器端編程。

Python vs. JavaScript:社區,圖書館和資源Python vs. JavaScript:社區,圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好,適合初學者,但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大,JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富,但Python適合從官方文檔開始,JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript:所有工作方式從C/C到JavaScript:所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1)C/C 是靜態類型語言,需手動管理內存,而JavaScript是動態類型,垃圾回收自動處理。 2)C/C 需編譯成機器碼,JavaScript則為解釋型語言。 3)JavaScript引入閉包、原型鍊和Promise等概念,增強了靈活性和異步編程能力。

JavaScript引擎:比較實施JavaScript引擎:比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時,效果會有所不同,因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析:將源碼轉換為詞法單元。 2.語法分析:生成抽象語法樹。 3.優化和編譯:通過JIT編譯器生成機器碼。 4.執行:運行機器碼。 V8引擎通過即時編譯和隱藏類優化,SpiderMonkey使用類型推斷系統,導致在相同代碼上的性能表現不同。

超越瀏覽器:現實世界中的JavaScript超越瀏覽器:現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制:1.通過Node.js實現服務器端編程,適用於高並發請求處理。 2.通過ReactNative進行移動應用開發,支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制,適用於硬件交互。

使用Next.js(後端集成)構建多租戶SaaS應用程序使用Next.js(後端集成)構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序(一個Edtech應用程序),您可以做同樣的事情。 首先,什麼是多租戶SaaS應用程序? 多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js(前端集成)構建多租戶SaaS應用程序如何使用Next.js(前端集成)構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成,並使用Next.js構建功能性Edtech SaaS應用程序。 前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 個月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
1 個月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
1 個月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它們
1 個月前By尊渡假赌尊渡假赌尊渡假赌

熱工具

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

WebStorm Mac版

WebStorm Mac版

好用的JavaScript開發工具

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),