jQuery UI拖放对象- UI, UI的区别.帮手和这个

Question

在一个拖放应用程序上工作，我对哪些对象是事件的基础有点困惑。例如，当我初始化draggable时，我设置了一个函数来运行拖拽回调并传递它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。帮手和这个。我想知道的是:

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相对于整个视口的位置。

---

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