資訊專欄INFORMATION COLUMN
摘要：基于的拖動(dòng)排序插件代碼地址核心代碼由于有些瀏覽器的圖片和鏈接是默認(rèn)可以拖動(dòng)的，所以屏蔽掉的事件只允許鼠標(biāo)左鍵拖動(dòng)禁止在表單元素里面拖動(dòng)滾動(dòng)條的位置向上排序向下排序用法水平有限，歡迎提出寶貴意見一起交流學(xué)習(xí)
基于jQuery的拖動(dòng)排序插件
代碼地址：https://github.com/ylb1992/dr...
核心代碼：
(function($) {
"use strict";
$.fn.dragSort = function(options) {
var settings = $.extend(true, {
targetEle: "li",
replaceStyle: {
"background-color": "#f9f9f9",
"border": "1px dashed #ffffd"
},
dragStyle: {
"position": "fixed",
"box-shadow": "10px 10px 20px 0 #eee"
}
}, options);
return this.each(function() {
// 由于有些瀏覽器的圖片和鏈接是默認(rèn)可以拖動(dòng)的，所以屏蔽掉document的dragstart事件
document.ondragstart = function() {
return false;
}
var thisEle = $(this);
thisEle.on("mousedown.dragSort", settings.targetEle, function(event) {
var selfEle = $(this);
// 只允許鼠標(biāo)左鍵拖動(dòng)
if(event.which !== 1) {
return;
}
// 禁止在表單元素里面拖動(dòng)
var tagName = event.target.tagName.toUpperCase();
if(tagName === "INPUT" || tagName === "TEXTAREA" || tagName === "SELECT") {
return;
}
var moveEle = $(this);
var offset = selfEle.offset();
var rangeX = event.pageX - offset.left;
var rangeY = event.pageY - offset.top;
var replaceEle = selfEle.clone()
.css("height", selfEle.outerHeight())
.css(settings.replaceStyle)
.empty();
settings.dragStyle.width = selfEle.width();
var move = true;
$(document).on("mousemove.dragSort", function(event) {
if (move) {
moveEle.before(replaceEle).css(settings.dragStyle).appendTo(moveEle.parent());
move = false;
}
var thisOuterHeight = moveEle.outerHeight();
// 滾動(dòng)條的位置
var scrollTop = $(document).scrollTop();
var scrollLeft = $(document).scrollLeft();
var moveLeft = event.pageX - rangeX - scrollLeft;
var moveTop = event.pageY - rangeY - scrollTop;
var prevEle = replaceEle.prev();
var nextEle = replaceEle.next().not(moveEle);
moveEle.css({
left: moveLeft,
top: moveTop
});
// 向上排序
if (prevEle.length > 0 && moveTop + scrollTop < prevEle.offset().top + prevEle.outerHeight() / 2) {
replaceEle.after(prevEle);
//向下排序
} else if (nextEle.length > 0 && moveTop + scrollTop > nextEle.offset().top - nextEle.outerHeight() / 2) {
replaceEle.before(nextEle);
}
});
$(document).on("mouseup.dragSort", function(event) {
$(document).off("mousemove.dragSort mouseup.dragSort")
if (!move) {
replaceEle.before(moveEle.removeAttr("style")).remove();
}
});
});
});
};
})(jQuery)
用法：
$("#wrap").dragSort();
水平有限，歡迎提出寶貴意見一起交流學(xué)習(xí)
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/83239.html
摘要：彈窗視頻嵌入插件幻燈片圖片切換手機(jī)端響應(yīng)式日期控件上傳圖片控件校驗(yàn)控件分頁(yè)靜態(tài)分頁(yè)動(dòng)態(tài)分頁(yè)相冊(cè)效果控件多級(jí)下拉圖片延遲加載或響應(yīng)式管理模板插件庫(kù)大轉(zhuǎn)盤九宮格效果整屏滾動(dòng)滾動(dòng)效果用于移動(dòng)項(xiàng)目的光滑菜單瀏覽器端格式化工具千手觀音 彈窗 1.blockUI2.overlay 3.sweetAlert 視頻 1.jwplayer2.video.js html53.swfobject Flas...
摘要：最近要做拖拽相關(guān)的功能，本來(lái)想自己寫，忽然想起來(lái)之前在輪子工廠有更新過(guò)，還是很好用滴。介紹一款可任意拖動(dòng)排序的插件。支持桌面和移動(dòng)端，拖拽過(guò)渡動(dòng)畫美觀。 最近要做拖拽相關(guān)的功能，本來(lái)想自己寫，忽然想起來(lái)之前在輪子工廠有更新過(guò)，vue-dragging還是很好用滴。 介紹 vue-dragging -- 一款可任意拖動(dòng)排序的vue插件。支持桌面和移動(dòng)端，拖拽過(guò)渡動(dòng)畫美觀。支持vue1和v...
摘要：插件美化實(shí)現(xiàn)拖拽排序，保持序號(hào)不變，但真實(shí)排序保持變化。代碼說(shuō)明為自定義請(qǐng)求，定義了數(shù)據(jù)接收處理和發(fā)送給后臺(tái)方法。里面有具體處理數(shù)據(jù)的樣式以及處理發(fā)送數(shù)據(jù)保存到數(shù)據(jù)庫(kù)的小。其他文件順序加載就好。 php+ajax+dragsort插件+bootstrap美化實(shí)現(xiàn)拖拽排序，保持序號(hào)不變，但真實(shí)排序保持變化。showImg(https://segmentfault.com/img/bVqK...
摘要：介紹是一款輕量級(jí)的拖放排序列表的插件雖然體積小，但是功能很強(qiáng)大下載地址官方特點(diǎn)支持觸屏設(shè)備和大部分瀏覽器以下的就不支持了，原因都懂得可以從一個(gè)列表容器中拖拽一個(gè)列表單元到其他容器或本列表容器中進(jìn)行排序移動(dòng)列表單元時(shí)有動(dòng)畫支持拖放操作和可選擇 介紹 Sortable.js是一款輕量級(jí)的拖放排序列表的js插件（雖然體積小，但是功能很強(qiáng)大）下載地址：https://github.com/Ru...
閱讀 1904·2021-11-22 09:34
閱讀 3042·2021-09-28 09:35
閱讀 13499·2021-09-09 11:34
閱讀 3608·2019-08-29 16:25
閱讀 2840·2019-08-29 15:23
閱讀 2051·2019-08-28 17:55
閱讀 2440·2019-08-26 17:04
閱讀 3056·2019-08-26 12:21
