带有原始位置占位符的jQuery Sortable()? [英] jQuery Sortable() with original position placeholder?

问题描述

有什么办法让jQuery可排序列表显示一个占位符，以表示您将其拖出进行排序时初始项目的位置?

Is there any way to have a jQuery sortable list show a placeholder for where the initial item was when you drag one out to sort?

即当用户要移动列表中的一个LI时，我想要一个矩形轮廓来显示他们拖动的LI的来源.

i.e. when a user goes to move one of the LIs in my list, I want a rectangle outline to show where the one they're dragging came from.

推荐答案

简短版本:您可以使用sortable的start事件处理程序来显示原始项目，并根据需要修改其外观.例如:

Short version: you can use sortable's start event handler to reveal the original item, and modify its appearance however you like. E.g.:

$(listOfStuff).sortable({
  start: function (e, ui) { 
    ui.item.show().addClass('original-placeholder');
  });

有了上述功能，用户开始拖动时，您的原始项目就会消失，而不会消失，而是保持其原始位置，并获得原始占位符".

With the above, rather than your original item dissappearing when the user begins to drag, it will maintain its original position, and it will gain the 'original-placeholder'.

发生了什么事(据我所知):

What's going on (as far as I can tell):

• start函数在用户开始拖动时运行.
• 当用户开始拖动时，原始项目实际上并没有移动，只是被隐藏了. (ui.helper是用户拖动的单独对象).通过调用ui.item.show()，可以使其保持显示状态. (嗯，从技术上讲，它是隐藏的，然后立即被隐藏起来，但是我看不到任何闪烁.)
• 然后您可以将ui.item修改为您内心的内容.在上面的示例中，我只是添加了一个类，但是您可以替换其内部的HTML等.

• The start function is run when the user begins to drag.
• When the user begins to drag, the original item isn't actually moved, it's just hidden. (ui.helper is a separate object that the user drags around). By calling ui.item.show(), you keep it revealed. (Well, technically it gets hidden and then immediately un-hidden, but I can't see any flicker.)
• And then you can modify ui.item to your heart's content. In the above example I just added a class, but you could instead replace its internal HTML, etc.

我对内部结构并不特别熟悉，但我想其他人可能会说出更多有关该技术的推动力.

I'm not particularly familiar with the internals, but I'd imagine others may be able to say more about how far one can push this technique.

这篇关于带有原始位置占位符的jQuery Sortable()?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！