jQuery UI 拖放对象 - ui、ui.helper 和 this 之间的区别

Question

在开发拖放应用程序时，我对将事件基于哪些对象感到有些困惑。例如，当我初始化可拖动对象时，我设置了一个函数以在拖动回调上运行并将其传递给 ui，以便我可以跟踪它的位置：

jQuery( '.drag' ).draggable({
        helper : 'clone',
        drag : function ( event, ui ) { test(ui.helper, ui, this);}
});

function test(helper, drag_ui, drag_this){

    //check the type of each, and as expected each are objects
    console.log('HLEPER TYPE: '+jQuery.type(cln_h));//object
    console.log('UI TYPE: '+jQuery.type(cl));//object
    console.log('THIS TYPE: '+jQuery.type(this_elem));//object

    //lets try and get the top position of each
    console.log('helper.position.top:  '+helper.position.top);//undefined
    console.log('drag_ui.position.top:  '+drag_ui.position.top);//working
    console.log('jQuery(drag_this).position.top:  '+jQuery(drag_this).position.top);//undefined


    //So, the ui parameter gives us a result, ui.helper nothing, and this nothing. 
    //However, if I get the position() of the helper and this first, then I get results.


    //get pos first
    helper_pos = helper.position();
    console.log('helper_pos.top:  '+helper_pos.top);//working

    drag_this_pos = jQuery(drag_this).position();
    console.log('drag_this_pos.top:  '+drag_this_pos.top);//working, but different result   

    //So now i have some results, but the weird thing is that drag_this is different to ui, and ui.helper. 
}

我想要的是在我拖动助手克隆时知道顶部位置。我见过的不同示例使用这三个中的任何一个：ui、ui.helper 和 this。我想知道的是：

1. 它们之间有什么区别？它们都是对象，但属性不同？
2. 在这种情况下，最佳做法是什么？

期待从中学到一些东西。

谢谢。

Answer 1

差异是微妙的，但存在，取决于场景。 如果您使用helper，请说明我们需要考虑的差异。

使用助手： http://jsfiddle.net/6UL5A/2/

当我们使用clone helper 时，draggable 在您拖动它的克隆时保持其位置。

-检索ui 或ui.helper 位置将得到helper 位置，两者的结果相同。

-检索this 位置将获得selector 位置，而不是它的克隆。

没有助手： http://jsfiddle.net/6UL5A/3/

这里我们有一个不同的场景，我们的draggable 选择器会移动，而不仅仅是它的克隆。

-检索ui 将获得与起始位置相关的selector 位置。

-检索ui.helper 或this 将获得selector 相对于整个视口的位置。

---

话虽如此，最佳 实践是适合您的设计需求的。