通过将最后一个删除的项目放在前面来对 jQuery 可删除元素进行排序

发布于 2024-11-25 08:01:25 字数 978 浏览 4 评论 0原文

我做了一些搜索,但找不到答案,而且对代码进行了一些修改,但无济于事。我有一个标准的 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

久而酒知 2024-12-02 08:01:25

是的,虽然它相当复杂。您需要扩展 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.asp

Tutorial for extending JQueryUI widgets: http://bililite.com/blog/extending-jquery-ui-widgets/

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文