/**!
* Sortable
* @author
* @license MIT
*/
(function (factory){
"use strict";
if( typeof define === "function" && define.amd ){
define(factory);
}
else if( typeof module != "undefined" && typeof module.exports != "undefined" ){
module.exports = factory();
}
else {
window["Sortable"] = factory();
}
})(function (){
"use strict";
var
dragEl
, ghostEl
, rootEl
, nextEl
, lastEl
, lastCSS
, lastRect
, activeGroup
, tapEvt
, touchEvt
, expando = ‘Sortable‘ + (new Date).getTime()
, win = window
, document = win.document
, parseInt = win.parseInt
, supportIEdnd = !!document.createElement(‘div‘).dragDrop
, _silent = false
, _createEvent = function (event/**String*/, item/**HTMLElement*/){
var evt = document.createEvent(‘Event‘);
evt.initEvent(event, true, true);
evt.item = item;
return evt;
}
, noop = function (){}
, slice = [].slice
, touchDragOverListeners = []
;
/**
* @class Sortable
* @param {HTMLElement} el
* @param {Object} [options]
*/
function Sortable(el, options){
this.el = el; // root element
this.options = options = (options || {});
// Defaults
options.group = options.group || Math.random();
options.store = options.store || null;
options.handle = options.handle || null;
options.draggable = options.draggable || el.children[0] && el.children[0].nodeName || (/[uo]l/i.test(el.nodeName) ? ‘li‘ : ‘*‘);
options.ghostClass = options.ghostClass || ‘sortable-ghost‘;
options.ignore = options.ignore || ‘a, img‘;
// Define events
‘onAdd onUpdate onRemove onStart onEnd‘.split(‘ ‘).forEach(function (name) {
options[name] = _bind(this, options[name] || noop);
});
// Export group name
el[expando] = options.group;
// Bind all private methods
for( var fn in this ){
if( fn.charAt(0) === ‘_‘ ){
this[fn] = _bind(this, this[fn]);
}
}
// Bind events
_on(el, ‘add‘, options.onAdd);
_on(el, ‘update‘, options.onUpdate);
_on(el, ‘remove‘, options.onRemove);
_on(el, ‘start‘, options.onStart);
_on(el, ‘stop‘, options.onEnd);
_on(el, ‘mousedown‘, this._onTapStart);
_on(el, ‘touchstart‘, this._onTapStart);
supportIEdnd && _on(el, ‘selectstart‘, this._onTapStart);
_on(el, ‘dragover‘, this._onDragOver);
_on(el, ‘dragenter‘, this._onDragOver);
touchDragOverListeners.push(this._onDragOver);
// Restore sorting
options.store && this.sort(options.store.get(this));
}
Sortable.prototype = /** @lends Sortable.prototype */ {
constructor: Sortable,
_applyEffects: function (){
_toggleClass(dragEl, this.options.ghostClass, true);
},
_onTapStart: function (evt/**Event|TouchEvent*/){
var
touch = evt.touches && evt.touches[0]
, target = (touch || evt).target
, options = this.options
, el = this.el
;
if( options.handle ){
target = _closest(target, options.handle, el);
}
target = _closest(target, options.draggable, el);
// IE 9 Support
if( target && evt.type == ‘selectstart‘ ){
if( target.tagName != ‘A‘ && target.tagName != ‘IMG‘){
target.dragDrop();
}
}
if( target && !dragEl && (target.parentNode === el) ){
tapEvt = evt;
rootEl = this.el;
dragEl = target;
nextEl = dragEl.nextSibling;
activeGroup = this.options.group;
dragEl.draggable = true;
// Disable "draggable"
options.ignore.split(‘,‘).forEach(function (criteria) {
_find(target, criteria.trim(), _disableDraggable);
});
if( touch ){
// Touch device support
tapEvt = {
target: target
, clientX: touch.clientX
, clientY: touch.clientY
};
this._onDragStart(tapEvt, true);
//evt.preventDefault();
}
_on(document, ‘mouseup‘, this._onDrop);
_on(document, ‘touchend‘, this._onDrop);
_on(document, ‘touchcancel‘, this._onDrop);
_on(this.el, ‘dragstart‘, this._onDragStart);
_on(this.el, ‘dragend‘, this._onDrop);
_on(document, ‘dragover‘, _globalDragOver);
try {
if( document.selection ){
document.selection.empty();
} else {
window.getSelection().removeAllRanges()
}
} catch (err){ }
dragEl.dispatchEvent(_createEvent(‘start‘, dragEl));
}
},
_emulateDragOver: function (){
if( touchEvt ){
_css(ghostEl, ‘display‘, ‘none‘);
var
target = document.elementFromPoint(touchEvt.clientX, touchEvt.clientY)
, parent = target
, group = this.options.group
, i = touchDragOverListeners.length
;
if( parent ){
do {
if( parent[expando] === group ){
while( i-- ){
touchDragOverListeners[i]({
clientX: touchEvt.clientX,
clientY: touchEvt.clientY,
target: target,
rootEl: parent
});
}
break;
}
target = parent; // store last element
}
while( parent = parent.parentNode );
}
_css(ghostEl, ‘display‘, ‘‘);
}
},
_onTouchMove: function (evt/**TouchEvent*/){
if( tapEvt ){
var
touch = evt.touches[0]
, dx = touch.clientX - tapEvt.clientX
, dy = touch.clientY - tapEvt.clientY
, translate3d = ‘translate3d(‘ + dx + ‘px,‘ + dy + ‘px,0)‘
;
touchEvt = touch;
_css(ghostEl, ‘webkitTransform‘, translate3d);
_css(ghostEl, ‘mozTransform‘, translate3d);
_css(ghostEl, ‘msTransform‘, translate3d);
_css(ghostEl, ‘transform‘, translate3d);
evt.preventDefault();
}
},
_onDragStart: function (evt/**Event*/, isTouch/**Boolean*/){
var dataTransfer = evt.dataTransfer;
this._offUpEvents();
if( isTouch ){
var
rect = dragEl.getBoundingClientRect()
, css = _css(dragEl)
, ghostRect
;
ghostEl = dragEl.cloneNode(true);
_css(ghostEl, ‘top‘, rect.top - parseInt(css.marginTop, 10));
_css(ghostEl, ‘left‘, rect.left - parseInt(css.marginLeft, 10));
_css(ghostEl, ‘width‘, rect.width);
_css(ghostEl, ‘height‘, rect.height);
_css(ghostEl, ‘opacity‘, ‘0.8‘);
_css(ghostEl, ‘position‘, ‘fixed‘);
_css(ghostEl, ‘zIndex‘, ‘100000‘);
rootEl.appendChild(ghostEl);
// Fixing dimensions.
ghostRect = ghostEl.getBoundingClientRect();
_css(ghostEl, ‘width‘, rect.width*2 - ghostRect.width);
_css(ghostEl, ‘height‘, rect.height*2 - ghostRect.height);
// Bind touch events
_on(document, ‘touchmove‘, this._onTouchMove);
_on(document, ‘touchend‘, this._onDrop);
_on(document, ‘touchcancel‘, this._onDrop);
this._loopId = setInterval(this._emulateDragOver, 150);
}
else {
dataTransfer.effectAllowed = ‘move‘;
dataTransfer.setData(‘Text‘, dragEl.textContent);
_on(document, ‘drop‘, this._onDrop);
}
setTimeout(this._applyEffects);
},
_onDragOver: function (evt/**Event*/){
if( !_silent && (activeGroup === this.options.group) && (evt.rootEl === void 0 || evt.rootEl === this.el) ){
var
el = this.el
, target = _closest(evt.target, this.options.draggable, el)
;
if( el.children.length === 0 || el.children[0] === ghostEl || (el === evt.target) && _ghostInBottom(el, evt) ){
el.appendChild(dragEl);
}
else if( target && target !== dragEl && (target.parentNode[expando] !== void 0) ){
if( lastEl !== target ){
lastEl = target;
lastCSS = _css(target);
lastRect = target.getBoundingClientRect();
}
var
rect = lastRect
, width = rect.right - rect.left
, height = rect.bottom - rect.top
, floating = /left|right|inline/.test(lastCSS.cssFloat + lastCSS.display)
, isWide = (target.offsetWidth > dragEl.offsetWidth)
, isLong = (target.offsetHeight > dragEl.offsetHeight)
, halfway = (floating ? (evt.clientX - rect.left)/width : (evt.clientY - rect.top)/height) > .5
, nextSibling = target.nextElementSibling
, after
;
_silent = true;
setTimeout(_unsilent, 30);
if( floating ){
after = (target.previousElementSibling === dragEl) && !isWide || halfway && isWide
} else {
after = (nextSibling !== dragEl) && !isLong || halfway && isLong;
}
if( after && !nextSibling ){
el.appendChild(dragEl);
} else {
target.parentNode.insertBefore(dragEl, after ? nextSibling : target);
}
}
}
},
_offUpEvents: function () {
_off(document, ‘mouseup‘, this._onDrop);
_off(document, ‘touchmove‘, this._onTouchMove);
_off(document, ‘touchend‘, this._onDrop);
_off(document, ‘touchcancel‘, this._onDrop);
},
_onDrop: function (evt/**Event*/){
clearInterval(this._loopId);
// Unbind events
_off(document, ‘drop‘, this._onDrop);
_off(document, ‘dragover‘, _globalDragOver);
_off(this.el, ‘dragend‘, this._onDrop);
_off(this.el, ‘dragstart‘, this._onDragStart);
_off(this.el, ‘selectstart‘, this._onTapStart);
this._offUpEvents();
if( evt ){
//evt.preventDefault();
//evt.stopPropagation();
if( ghostEl ){
ghostEl.parentNode.removeChild(ghostEl);
}
if( dragEl ){
_disableDraggable(dragEl);
_toggleClass(dragEl, this.options.ghostClass, false);
if( !rootEl.contains(dragEl) ){
// Remove event
rootEl.dispatchEvent(_createEvent(‘remove‘, dragEl));
// Add event
dragEl.dispatchEvent(_createEvent(‘add‘, dragEl));
}
else if( dragEl.nextSibling !== nextEl ){
// Update event
dragEl.dispatchEvent(_createEvent(‘update‘, dragEl));
}
dragEl.dispatchEvent(_createEvent(‘stop‘, dragEl));
}
// Set NULL
rootEl =
dragEl =
ghostEl =
nextEl =
tapEvt =
touchEvt =
lastEl =
lastCSS =
activeGroup = null;
// Save sorting
this.options.store && this.options.store.set(this);
}
},
/**
* Serializes the item into an array of string.
* @returns {String[]}
*/
toArray: function () {
var order = [],
el,
children = this.el.children,
i = 0,
n = children.length
;
for (; i < n; i++) {
el = children[i];
order.push(el.getAttribute(‘data-id‘) || _generateId(el));
}
return order;
},
/**
* Sorts the elements according to the array.
* @param {String[]} order order of the items
*/
sort: function (order) {
var items = {}, el = this.el;
this.toArray().forEach(function (id, i) {
items[id] = el.children[i];
});
order.forEach(function (id) {
if (items[id]) {
el.removeChild(items[id]);
el.appendChild(items[id]);
}
});
},
/**
* Destroy
*/
destroy: function () {
var el = this.el, options = this.options;
_off(el, ‘add‘, options.onAdd);
_off(el, ‘update‘, options.onUpdate);
_off(el, ‘remove‘, options.onRemove);
_off(el, ‘start‘, options.onStart);
_off(el, ‘stop‘, options.onEnd);
_off(el, ‘mousedown‘, this._onTapStart);
_off(el, ‘touchstart‘, this._onTapStart);
_off(el, ‘selectstart‘, this._onTapStart);
_off(el, ‘dragover‘, this._onDragOver);
_off(el, ‘dragenter‘, this._onDragOver);
//remove draggable attributes
Array.prototype.forEach.call(el.querySelectorAll(‘[draggable]‘), function(el) {
el.removeAttribute(‘draggable‘);
});
touchDragOverListeners.splice(touchDragOverListeners.indexOf(this._onDragOver), 1);
this._onDrop();
this.el = null;
}
};
function _bind(ctx, fn){
var args = slice.call(arguments, 2);
return fn.bind ? fn.bind.apply(fn, [ctx].concat(args)) : function (){
return fn.apply(ctx, args.concat(slice.call(arguments)));
};
}
function _closest(el, selector, ctx){
if( selector === ‘*‘ ){
return el;
}
else if( el ){
ctx = ctx || document;
selector = selector.split(‘.‘);
var
tag = selector.shift().toUpperCase()
, re = new RegExp(‘\\s(‘+selector.join(‘|‘)+‘)\\s‘, ‘g‘)
;
do {
if(
(tag === ‘‘ || el.nodeName == tag)
&& (!selector.length || ((‘ ‘+el.className+‘ ‘).match(re) || []).length == selector.length)
){
return el;
}
}
while( el !== ctx && (el = el.parentNode) );
}
return null;
}
function _globalDragOver(evt){
evt.dataTransfer.dropEffect = ‘move‘;
evt.preventDefault();
}
function _on(el, event, fn){
el.addEventListener(event, fn, false);
}
function _off(el, event, fn){
el.removeEventListener(event, fn, false);
}
function _toggleClass(el, name, state){
if( el ){
if( el.classList ){
el.classList[state ? ‘add‘ : ‘remove‘](name);
}
else {
var className = (‘ ‘+el.className+‘ ‘).replace(/\s+/g, ‘ ‘).replace(‘ ‘+name+‘ ‘, ‘‘);
el.className = className + (state ? ‘ ‘+name : ‘‘)
}
}
}
function _css(el, prop, val){
if( el && el.style ){
if( val === void 0 ){
if( document.defaultView && document.defaultView.getComputedStyle ){
val = document.defaultView.getComputedStyle(el, ‘‘);
}
else if( el.currentStyle ){
val = el.currentStyle;
}
return prop === void 0 ? val : val[prop];
} else {
el.style[prop] = val + (typeof val === ‘string‘ ? ‘‘ : ‘px‘);
}
}
}
function _find(ctx, tagName, iterator){
if( ctx ){
var list = ctx.getElementsByTagName(tagName), i = 0, n = list.length;
if( iterator ){
for( ; i < n; i++ ){
iterator(list[i], i);
}
}
return list;
}
return [];
}
function _disableDraggable(el){
return el.draggable = false;
}
function _unsilent(){
_silent = false;
}
function _ghostInBottom(el, evt){
var last = el.lastElementChild.getBoundingClientRect();
return evt.clientY - (last.top + last.height) > 5; // min delta
}
/**
* Generate id
* @param {HTMLElement} el
* @returns {String}
* @private
*/
function _generateId(el) {
var str = el.innerHTML + el.className + el.src,
i = str.length,
sum = 0
;
while (i--) {
sum += str.charCodeAt(i);
}
return sum.toString(36);
}
// Export utils
Sortable.utils = {
on: _on,
off: _off,
css: _css,
find: _find,
bind: _bind,
closest: _closest,
toggleClass: _toggleClass
};
Sortable.version = ‘0.4.1‘;
// Export
return Sortable;
});
上面是插件的JS
HTML代码:
<div class="add_mobile_info">
<section>
<div class="add_infomation" style="top:82px; height:100%;">
<div class="add_info_area">
<div class="introsInput"><a>推荐</a></div>
<div class="add_auto" id="sortTableDiv" >
<div id="i01" seq="1" parentdId="0"><a>教育资讯</a><i class="close_icon"></i></div>
<div id="i02" seq="2" parentdId="1"><a>边走边吃</a><i class="close_icon"></i></div>
<div id="i03" seq="3" parentdId="2"><a>机智人生</a><i class="close_icon"></i></div>
<div id="i04" seq="4" parentdId="0"><a>恶搞专区</a><i class="close_icon"></i></div>
<div id="i05" seq="5" parentdId="2"><a>保养维护</a><i class="close_icon"></i></div>
<div id="i06" seq="6" parentdId="0"><a>疾病知识</a><i class="close_icon"></i></div>
<div id="i07" seq="7" parentdId="2"><a>行车技巧</a><i class="close_icon"></i></div>
<div id="i08" seq="8" parentdId="2"><a>购车须知</a><i class="close_icon"></i></div>
<div id="i09" seq="9" parentdId="1"><a>健康测试</a><i class="close_icon"></i></div>
<div id="i10" seq="10" parentdId="1"><a>保险理赔</a><i class="close_icon"></i></div>
<div id="i11" seq="11" parentdId="2"><a>优惠快讯</a><i class="close_icon"></i></div>
<div id="i12" seq="12" parentdId="2"><a>信用卡商城</a><i class="close_icon"></i></div>
<div id="i13" seq="13" parentdId="2"><a>保单服务</a><i class="close_icon"></i></div>
<div id="i14" seq="14" parentdId="2"><a>增值服务</a><i class="close_icon"></i></div>
<div id="i15" seq="15" parentdId="2"><a>保险优惠</a><i class="close_icon"></i></div>
</div>
</div>
<div class="clear"></div>
<div class="infomation_tab_add">
<div class="title_TV"><span>点击频道添加</span></div>
</div>
<div class="item_add_info">
<div class="item_info_t item_info_t1"><span>健康服务</span></div>
<div class="add_auto_it add_item_0" id="0">
<div id="01" parentdId="0"><a>美颜美体</a></div>
<div id="02" parentdId="0"><a>和谐家庭</a></div>
<div id="03" parentdId="0"><a>运动达人</a></div>
<div id="04" parentdId="0"><a>饮食养生</a></div>
</div>
</div>
<div class="clear"></div>
<div class="item_add_info">
<div class="item_info_t item_info_t2"><span>生活服务</span></div>
<div class="add_auto_it add_item_1" id="1">
<div id="09" parentdId="1"><a>保险知识</a></div>
<div id="010" parentdId="1"><a>理财攻略</a></div>
<div id="011" parentdId="1"><a>财富故事</a></div>
<div id="012" parentdId="1"><a>巧手煮妇</a></div>
<div id="013" parentdId="1"><a>全能居家</a></div>
<div id="014" parentdId="1"><a>创意生活</a></div>
<div id="015" parentdId="1"><a>教子有方</a></div>
<div id="016" parentdId="1"><a>少儿才艺</a></div>
</div>
</div>
<div class="clear"></div>
<div class="item_add_info">
<div class="item_info_t item_info_t3"><span>财富服务</span></div>
<div class="add_auto_it add_item_2" id="2">
<div id="13" parentdId="2"><a>信用卡理财</a></div>
<div id="14" parentdId="2"><a>贷款攻略</a></div>
<div id="15" parentdId="2"><a>贷款产品</a></div>
<div id="16" parentdId="2"><a>贷款活动</a></div>
<div id="17" parentdId="2"><a>产品介绍</a></div>
<div id="18" parentdId="2"><a>保险优惠</a></div>
<div id="19" parentdId="2"><a>投资知识</a></div>
<div id="20" parentdId="2"><a>理赔服务</a></div>
</div>
</div>
</div>
</section>
</div>
直接：
//编辑资讯栏目
$(".infomation_tab_add").on("click","a.edit",function(){
sortable = new Sortable(sortTableDiv, {});//允许排序
$(this).empty().text("完成");
$(this).removeClass("edit");
$(this).addClass("ok_btu");
$(".add_auto").find("div").addClass("dotted");
$(".add_auto").find("div i.close_icon").show();
$(".add_auto").addClass("add_auto_item");
$(".title_TV").find("em").css("display","block");
})
//完成资讯栏目
$(".infomation_tab_add").on("click","a.ok_btu",function(){
sortable.destroy();//销毁排序功能
$(this).empty().text("编辑");
$(this).removeClass("ok_btu");
$(this).addClass("edit");
$(".add_info_area").find("div").removeClass("dotted");
$(".add_info_area").find("div i.close_icon").hide();
$(".title_TV").find("em").css("display","none");
$(".add_auto div").each(function(index,data){
$(data).attr("seq",index+1);
})
})
时间： 2024-08-08 09:28:03