搜尋
首頁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評論:使用//和 / * * / * / * /May 13, 2025 pm 03:49 PM

JavaScriptusestwotypesofcomments:single-line(//)andmulti-line(//).1)Use//forquicknotesorsingle-lineexplanations.2)Use//forlongerexplanationsorcommentingoutblocksofcode.Commentsshouldexplainthe'why',notthe'what',andbeplacedabovetherelevantcodeforclari

Python vs. JavaScript:開發人員的比較分析Python vs. JavaScript:開發人員的比較分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要區別在於類型系統和應用場景。 1.Python使用動態類型,適合科學計算和數據分析。 2.JavaScript採用弱類型,廣泛用於前端和全棧開發。兩者在異步編程和性能優化上各有優勢,選擇時應根據項目需求決定。

Python vs. JavaScript:選擇合適的工具Python vs. JavaScript:選擇合適的工具May 08, 2025 am 12:10 AM

選擇Python還是JavaScript取決於項目類型:1)數據科學和自動化任務選擇Python;2)前端和全棧開發選擇JavaScript。 Python因其在數據處理和自動化方面的強大庫而備受青睞,而JavaScript則因其在網頁交互和全棧開發中的優勢而不可或缺。

Python和JavaScript:了解每個的優勢Python和JavaScript:了解每個的優勢May 06, 2025 am 12:15 AM

Python和JavaScript各有優勢,選擇取決於項目需求和個人偏好。 1.Python易學,語法簡潔,適用於數據科學和後端開發,但執行速度較慢。 2.JavaScript在前端開發中無處不在,異步編程能力強,Node.js使其適用於全棧開發,但語法可能複雜且易出錯。

JavaScript的核心:它是在C還是C上構建的?JavaScript的核心:它是在C還是C上構建的?May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; sanInterpretedlanguagethatrunsonenginesoftenwritteninc.1)JavascriptwasdesignedAsignedAsalightWeight,drackendedlanguageforwebbrowsers.2)Enginesevolvedfromsimpleterterpretpretpretpretpreterterpretpretpretpretpretpretpretpretpretcompilerers,典型地,替代品。

JavaScript應用程序:從前端到後端JavaScript應用程序:從前端到後端May 04, 2025 am 12:12 AM

JavaScript可用於前端和後端開發。前端通過DOM操作增強用戶體驗,後端通過Node.js處理服務器任務。 1.前端示例:改變網頁文本內容。 2.後端示例:創建Node.js服務器。

Python vs. JavaScript:您應該學到哪種語言?Python vs. JavaScript:您應該學到哪種語言?May 03, 2025 am 12:10 AM

選擇Python還是JavaScript應基於職業發展、學習曲線和生態系統:1)職業發展:Python適合數據科學和後端開發,JavaScript適合前端和全棧開發。 2)學習曲線:Python語法簡潔,適合初學者;JavaScript語法靈活。 3)生態系統:Python有豐富的科學計算庫,JavaScript有強大的前端框架。

JavaScript框架:為現代網絡開發提供動力JavaScript框架:為現代網絡開發提供動力May 02, 2025 am 12:04 AM

JavaScript框架的強大之處在於簡化開發、提升用戶體驗和應用性能。選擇框架時應考慮:1.項目規模和復雜度,2.團隊經驗,3.生態系統和社區支持。

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脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。