通过将最后一个删除的项目放在前面来对 jQuery 可删除元素进行排序
我做了一些搜索,但找不到答案,而且对代码进行了一些修改,但无济于事。我有一个标准的 jQuery UI 可拖放设置,可以正常工作。
然而,当项目(在本例中是鞋子)被拖到可放置的目标区域时,它们似乎被附加,因此旧项目保留在前面,而新项目被添加到末尾并被推出视图。
有没有一种方法可以将可排序的项目添加到我的可删除目标之前,而不是附加到目标中?
编辑**
var proto = $.ui.droppable.prototype;
proto._create = function() {
console.log('Calling the create method');
var o = this.options, accept = o.accept;
this.isover = 0; this.isout = 1;
this.accept = $.isFunction(accept) ? accept : function(d) {
return d.is(accept);
};
//Store the droppable's proportions
this.proportions = { width: this.element[0].offsetWidth, height: this.element[0].offsetHeight };
// Add the reference and positions to the manager
$.ui.ddmanager.droppables[o.scope] = $.ui.ddmanager.droppables[o.scope] || [];
$.ui.ddmanager.droppables[o.scope].unshift(this);
(o.addClasses && this.element.addClass("ui-droppable"));
};
I did some searching and couldn't find an answer to this, plus did some messing around with the code to no avail. I have a standard jQuery UI draggable and droppable setup which works.
However when items (in this case shoes) are dragged into the droppable target area, they appear to be appended, so old items stay at the front and new items get added on the end and pushed out of view.
Is there a way of having the sortable items prepend to my target droppable as opposed to being appended?
Edit **
var proto = $.ui.droppable.prototype;
proto._create = function() {
console.log('Calling the create method');
var o = this.options, accept = o.accept;
this.isover = 0; this.isout = 1;
this.accept = $.isFunction(accept) ? accept : function(d) {
return d.is(accept);
};
//Store the droppable's proportions
this.proportions = { width: this.element[0].offsetWidth, height: this.element[0].offsetHeight };
// Add the reference and positions to the manager
$.ui.ddmanager.droppables[o.scope] = $.ui.ddmanager.droppables[o.scope] || [];
$.ui.ddmanager.droppables[o.scope].unshift(this);
(o.addClasses && this.element.addClass("ui-droppable"));
};
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
是的,虽然它相当复杂。您需要扩展 JQueryUI
ui.droppable
对象并修改_create
函数。目前,它使用 Push 将新项目添加到数组的末尾,如下所示:$.ui.ddmanager.droppables[o.scope].push(this);
您需要使用unshift:
$.ui.ddmanager.droppables[o.scope].unshift(this);
JQuery 可删除源:
https://github.com/jquery/jquery -ui/blob/master/ui/jquery.ui.droppable.js
JavaScript
unshift()
文档:http://www.w3schools.com/jsref/jsref_unshift.asp扩展 JQueryUI 小部件的教程:http://bililite.com/blog/extending-jquery-ui-widgets/
Yes, though it's pretty complicated. You'll need to extend the JQueryUI
ui.droppable
object modifying the_create
function. Currently it uses push to add your new item to the end of the array, like so:$.ui.ddmanager.droppables[o.scope].push(this);
You'll want to use unshift:
$.ui.ddmanager.droppables[o.scope].unshift(this);
JQuery droppable source:
https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.droppable.js
JavaScript
unshift()
documentation:http://www.w3schools.com/jsref/jsref_unshift.aspTutorial for extending JQueryUI widgets: http://bililite.com/blog/extending-jquery-ui-widgets/