之前开发一个后台治理 系统,里面用到了 Vue 和 Element-UI 那个组件库,碰着 一个挺有意思的问题,和各人分享一下。
场景是如许,在一个列表展现烂配亮页上,我利用了 Element-UI 的表格组件,新的需求是在原表格的根底上卖旅撑持挈 拽排序。但是原有的组件自己不撑持挈 拽排序,并且因为是间接引进 的 Element-UI ,不便利修改它的源码,所以比力可行的办法只能是 间接操做DOM 。
详细的做法是在 mounted 生命周期函数里,对 this.$el 停止实在DOM的操做,监听 drag 的一系列事务,在事务回调里挪动DOM,并更新data。
HTML5 Drag 事务仍是挺多的,和 Touch 事务差不多,本身手工实现也能够,不外那里就偷了个懒,间接用了一个开源的 Sortable 库,间接传进 this.$el ,监听封拆后的回调,而且根据 Vue的开发形式,在挪动DOM的回调里更新现实的Data数据, 连结数据和DOM的一致性 。
假设 你认为到那就完毕了,那就大错特错,偷过的懒迟早要还。。。本认为那个计划是很美妙的,没想到刚想调试一下,就呈现了诡异的现象:A和B挈 拽交换位置之后,B和A又神异 得换回往 了!那是怎么回事?似乎我们的操做没有什么问题,在实在DOM挪动了之后,我们也挪动了响应的 data ,数据数组的挨次和衬着出DOM的挨次应该是一致的。
问题出在哪里?我们回忆一下Vue的实现原理,在Vue2.0之前是通过 defineProperty 依靠 注进 和跟踪的体例实现双向绑定。针对v-for数组指令,假设 指定了独一的Key,则会通过高效的Diff算法计算出数组内元素的差别,停止起码的挪动或删除操做。而Vue2.0之后在引进 了 Virtual Dom 之后, Children 元素的 Dom Diff 算法和前者其实是类似的,独一的区别就是,2.0之前Diff间接针对 v-for 指令的数组对象,2.0之后则针对 Virtual Dom 。DOM Diff算法在那里不再赘述,那里阐明 的比力清晰 virtual-dom diff算法
假设我们的列表元素数组是
衬着出来后的DOM节点是
那么Virtual Dom对应的构造就是
假设挈 拽排序之后,实在的DOM变成
此时我们只操做了实在DOM,改编了它的位置,而Virtual Dom的构造并没有改动,仍然是
此时我们把列表元素也根据实在DOM排序后酿成
那时候根据 Diff算法,计算出的Patch为, VNode前两项是同类型的节点 ,所以间接更新,即把$A节点饥宽更新成$B,把$B节点更新成$A,实在DOM又变回了
所以就呈现了挈 拽之后又被Patch算法更新了一次的问题,操做途径能够简单理解为
底子原因是 Virtual DOM 和 实在DOM 之间呈现了纷歧致。
所以在Vue2.0以前,因为没有引进 Virtual DOM ,那个问题是不存在的。
在利用Vue框架的时候要尽量制止间接操做DOM
3.暴力处理!不走patch更新,通过v-if设置,间接从头衬着一边。当然不料见 那么做,只是供给那种构想 ~
所以,我们日常平凡在利用框架的时候,也要往 领会框架的实现原理的,不然碰着 一些棘手的情状 就会无从下手~
js中sortable怎么获取挈 动的工具是jquery吧
所有的事务回调函数都有两个参数:event和ui,阅读器自有event对象,和颠末封拆的ui对象
ui.helper - 表达 sortable元素的JQuery对象,凡是是当前元素的克隆对象
ui.position - 表达 相对当前对象,鼠标的坐标值对象{top,left}
ui.offset - 表达 相关于当前页面,鼠标的坐标值对象{top,left}
ui.item - 表达 当前挈 拽的元素
ui.placeholder - 占位符(假设 有定义的话)
ui.sender - 当前挈 拽元素的所属sortable对象(仅当元素是从另一个sortable对象传递过来时有用)
·参数(参数名 : 参数类型 : 默认值)
appendTo : String : 'parent'
Defines where the helper that moves with the mouse is being appended to during the drag (for example, to resolve overlap/zIndex issues).
初始:$('.selector').sortable({ appendTo: 'body' });
获取:var appendTo = $('.selector').sortable('option', 'appendTo');
设置:$('.selector').sortable('option', 'appendTo', 'body');
axis : String : false
假设 有设置,则元素仅能横向或纵向挈 动。可选值:'x', 'y'
初始:$('.selector').sortable({ axis: 'x' });
获取:var axis = $('.selector').sortable('option', 'axis');
设置:$('镇尺.selector').sortable('option', 'axis', 'x');
cancel : Selector : ':input,button'
阻遏排序动做在婚配的元素笑清上发作。
初始:$('.selector').sortable({ cancel: 'button' });
获取:var cancel = $('.selector').sortable('option', 'cancel');
设置:$('.selector').sortable('碰旅前option', 'cancel', 'button');
connectWith : Selector : false
容许 sortable对象毗连另一个sortable对象,可将item元素挈 拽到另一个中。
初始:$('.selector').sortable({ connectWith: '.otherlist' });
获取:var connectWith = $('.selector').sortable('option', 'connectWith');
设置:$('.selector').sortable('option', 'connectWith', '.otherlist');
containment : Element, String, Selector : false
约束排序动做只能在一个指定的范畴 内发作。可选值:DOM对象, 'parent', 'document', 'window', 或jQuery对象
初始:$('.selector').sortable({ containment: 'parent' });
获取:var containment = $('.selector').sortable('option', 'containment');
设置:$('.selector').sortable('option', 'containment', 'parent');
cursor : String : 'auto'
定义在起头排序动做时,假设 的款式。
初始:$('.selector').sortable({ cursor: 'crosshair' });
获取:var cursor = $('.selector').sortable('option', 'cursor');
设置:$('.selector').sortable('option', 'cursor', 'crosshair');
cursorAt : Object : false
当起头挪动时,鼠标定位在的某个位置上(最多两个标的目的)。可选值:{ top, left, right, bottom }.
初始:$('.selector').sortable({ cursorAt: 'top' });
获取:var cursorAt = $('.selector').sortable('option', 'cursorAt');
设置:$('.selector').sortable('option', 'cursorAt', 'top');
delay : Integer : 0
以毫秒为单元,设置延迟多久才激活排序动做。此参数可避免误点击。
初始:$('.selector').sortable({ delay: 500 });
获取:var delay = $('.selector').sortable('option', 'delay');
设置:$('.selector').sortable('option', 'delay', 500);
distance : Integer : 1
决定至少要在元素上面挈 动几像素后,才正式触发排序动做。
初始:$('.selector').sortable({ distance: 30 });
获取:var distance = $('.selector').sortable('option', 'distance');
设置:$('.selector').sortable('option', 'distance', 30);
dropOnEmpty : Boolean : true
能否容许 挈 找到一个空的sortable对象中。
初始:$('.selector').sortable({ dropOnEmpty: false });
获取:var dropOnEmpty = $('.selector').sortable('option', 'dropOnEmpty');
设置:$('.selector').sortable('option', 'dropOnEmpty', false);
forceHelperSize : Boolean : false
If true, forces the helper to have a size.
初始:$('.selector').sortable({ forceHelperSize: true });
获取:var forceHelperSize = $('.selector').sortable('option', 'forceHelperSize');
设置:$('.selector').sortable('option', 'forceHelperSize', true);
forcePlaceholderSize : Boolean : false
If true, forces the placeholder to have a size.
初始:$('.selector').sortable({ forcePlaceholderSize: true });
获取:var forcePlaceholderSize = $('.selector').sortable('option', 'forcePlaceholderSize');
设置:$('.selector').sortable('option', 'forcePlaceholderSize', true);
grid : Array : false
将排序对象的item元素视为一个格子处置,每次挪动都按一个格子大小挪动,数组值:[x,y]
初始:$('.selector').sortable({ grid: [50, 20] });
获取:var grid = $('.selector').sortable('option', 'grid');
设置:$('.selector').sortable('option', 'grid', [50, 20]);
handle : Selector, Element : false
限造排序的动做只能在item元素中的某个元素起头。
初始:$('.selector').sortable({ handle: 'h2' });
获取:var handle = $('.selector').sortable('option', 'handle');
设置:$('.selector').sortable('option', 'handle', 'h2');
helper : String, Function : 'original'
设置能否在挈 拽元素时,展现 一个辅助的元素。可选值:'original', 'clone'
初始:$('.selector').sortable({ helper: 'clone' });
获取:var helper = $('.selector').sortable('option', 'helper');
设置:$('.selector').sortable('option', 'helper', 'clone');
items : Selector : ' *'
指定在排序对象中,哪些元素是能够停止挈 拽排序的。
初始:$('.selector').sortable({ items: 'li' });
获取:var items = $('.selector').sortable('option', 'items');
设置:$('.selector').sortable('option', 'items', 'li');
opacity : Float : false
定义当排序时,辅助元素(helper)展现 的通明度。
初始:$('.selector').sortable({ opacity: 0.6 });
获取:var opacity = $('.selector').sortable('option', 'opacity');
设置:$('.selector').sortable('option', 'opacity', 0.6);
placeholderType: StringDefault: false
设置当排序动做发作时,空白占位符的CSS款式。
初始:$('.selector').sortable({ placeholder: 'ui-state-highlight' });
获取:var placeholder = $('.selector').sortable('option', 'placeholder');
设置:$('.selector').sortable('option', 'placeholder', 'ui-state-highlight');
revert : Boolean : false
假设 设置成true,则被挈 拽的元素在返回新位置时,会有一个动画效果。
初始:$('.selector').sortable({ revert: true });
获取:var revert = $('.selector').sortable('option', 'revert');
设置:$('.selector').sortable('option', 'revert', true);
scroll : Boolean : true
假设 设置成true,则元素被挈 动到页面边沿时,会主动滚动。
初始:$('.selector').sortable({ scroll: false });
获取:var scroll = $('.selector').sortable('option', 'scroll');
设置:$('.selector').sortable('option', 'scroll', false);
scrollSensitivity : Integer : 20
设置当元素挪动至边沿几像素时,便起头滚动页面。
初始:$('.selector').sortable({ scrollSensitivity: 40 });
获取:var scrollSensitivity = $('.selector').sortable('option', 'scrollSensitivity');
设置:$('.selector').sortable('option', 'scrollSensitivity', 40);
scrollSpeed : Integer : 20
设置页面滚动的速度。
初始:$('.selector').sortable({ scrollSpeed: 40 });
获取:var scrollSpeed = $('.selector').sortable('option', 'scrollSpeed');
设置:$('.selector').sortable('option', 'scrollSpeed', 40);
tolerance : String : 'intersect'
设置当挈 动元素越过其它元素几时便对元素停止从头排序。可选值:'intersect', 'pointer'
intersect:至少堆叠50%
pointer:鼠标指针堆叠元素
初始:$('.selector').sortable({ tolerance: 'pointer' });
获取:var tolerance = $('.selector').sortable('option', 'tolerance');
设置:$('.selector').sortable('option', 'tolerance', 'pointer');
zIndex : Integer : 1000
设置在排序动做发作时,元素的z-index值。
初始:$('.selector').sortable({ zIndex: 5 });
获取:var zIndex = $('.selector').sortable('option', 'zIndex');
设置:$('.selector').sortable('option', 'zIndex', 5);
·事务
start
当排序动做起头时触发此事务。
定义:$('.selector').sortable({ start: function(event, ui) { ... } });
绑定:$('.selector').bind('sortstart', function(event, ui) { ... });
sort
当元素发作排序时触发此事务。
定义:$('.selector').sortable({ sort: function(event, ui) { ... } });
绑定:$('.selector').bind('sort', function(event, ui) { ... });
change
当元素发作排序且坐标已发作改动时触发此事务。
定义:$('.selector').sortable({ change: function(event, ui) { ... } });
绑定:$('.selector').bind('sortchange', function(event, ui) { ... });
beforeStop
当排序动做完毕之前触发此事务。此时占位符元素和辅助元素仍有效。
定义:$('.selector').sortable({ beforeStop: function(event, ui) { ... } });
绑定:$('.selector').bind('sortbeforeStop', function(event, ui) { ... });
stop
当排序动做完毕时触发此事务。
定义:$('.selector').sortable({ stop: function(event, ui) { ... } });
绑定:$('.selector').bind('sortstop', function(event, ui) { ... });
update
当排序动做完毕时且元素坐标已经发作改动时触发此事务。
定义:$('.selector').sortable({ update: function(event, ui) { ... } });
绑定:$('.selector').bind('sortupdate', function(event, ui) { ... });
receive
当一个已毗连的sortable对象领受到另一个sortable对象的元素后触发此事务。
定义:$('.selector').sortable({ receive: function(event, ui) { ... } });
绑定:$('.selector').bind('sortreceive', function(event, ui) { ... });
over
当一个元素挈 拽移进 另一个sortable对象后触发此事务。
定义:$('.selector').sortable({ over: function(event, ui) { ... } });
绑定:$('.selector').bind('sortover', function(event, ui) { ... });
out
当一个元素挈 拽移出sortable对象移出并进进 另一个sortable对象后触发此事务。
定义:$('.selector').sortable({ out: function(event, ui) { ... } });
绑定:$('.selector').bind('sortout', function(event, ui) { ... });
activate
当一个有利用毗连的sortable对象起头排序动做时,所有容许 的sortable触发此事务。
定义:$('.selector').sortable({ activate: function(event, ui) { ... } });
绑定:$('.selector').bind('sortactivate', function(event, ui) { ... });
deactivate
当一个有利用毗连的sortable对象完毕排序动做时,所有容许 的sortable触发此事务。
定义:$('.selector').sortable({ deactivate: function(event, ui) { ... } });
绑定:$('.selector').bind('sortdeactivate', function(event, ui) { ... });
·办法
destory
从元素中移除挈 拽功用。
用法:.sortable( 'destroy' )
disable
禁用元素的挈 拽功用。
用法:.sortable( 'disable' )
enable
启用元素的挈 拽功用。
用法:.sortable( 'enable' )
option
获取或设置元素的参数。
用法:.sortable( 'option' , optionName , [value] )
serialize
获取或设置序列化后的每个item元素的id属性。
用法:.sortable( 'serialize' , [options] )
toArray
获取序列化后的每个item元素的id属性的数组。
用法:.sortable( 'toArray' )
refresh
手动从头刷新当前sortable对象的item元素的排序。
用法:.sortable( 'refresh' )
refreshPositions
手动从头刷新当前sortable对象的item元素的坐标,此办法可能会降低性能。
用法:.sortable( 'refreshPositions' )
cancel
取缔 当前sortable对象中item元素的排序改动。
用法:.sortable( 'cancel' )
排序后保留有两种办法,一是cookie,二是数据库设置装备摆设文件等。
下面是数据库的部门代码 原做:
复造代码代码如下:
$(function() {
var show = $(".loader");
var orderlist = $(".orderlist");
var listleft = $("div[id = 'column_left']");
var listcenter = $("div[id = 'column_center']");
var listright = $("div[id = 'column_right']");
$( ".column" ).sortable({
opacity: 0.5,//挈 动的通明度
revert: true, //缓冲效果
cursor: 'move', //挈 动的时候鼠标款式
connectWith: ".column",
//起头用update 成果施行两次,浪费资本,古改成stop
//但是stop在元素没有改动位置的时候也会施行,
//用update其他js会有问题,^_^
stop: function(){
var new_order_left = []; //左栏规划
var new_order_center = [];//中栏规划
var new_order_right = [];//右栏规划
listleft.children(".portlet").each(function() {
new_order_left.push(this.title);
});
listcenter.children(".portlet").each(function() {
new_order_center.push(this.title);
});
listright.children(".portlet").each(function() {
new_order_right.push(this.title);
});
var newleftid = new_order_left.join(',');
var newcenterid = new_order_center.join(',');
var newrightid = new_order_right.join(',');
$.ajax({
type: "post",
url: jsonUrl, //办事端处置法式
data: { leftid: newleftid, centerid: newcenterid, rightid:newrightid}, //id:新的摆列对应的ID,order:原摆列挨次
// beforeSend: function() {
// show.html(" 正在更新");
// },
success: function(msg) {
//alert(msg);
show.html("");
}
});
}
});
sortable:true; 那是什么意思
sortable:true
分类:实在
sortable[英]['sɔ:təbl][美]['sɔ:təbəl]
adj.可分类的;
true[英][tru:][美][tru:]
adj.实正的; 实在的; 忠实的; 准确的羡山;
adv.实正地; 确实地; 准确地; 合理地;
n.实理,实兄饥中实; 正,准,切确;
vt.摆正; 决定(某物)肢亩的位置以使其平衡、平稳或程度;