將Draggable連接到Sortable會導致幫助器元素跳轉

Question

我在頁面上有一個jQueryUI可拖動對象和一個可排序對象。

將元素從可拖動元素拖到可排序元素會導致拖動元素跳轉到頁面左上角。

這裏的演示：http://jsfiddle.net/travisrussi/aBhDu/1/

重現：

• 將 '項目5' 從可拖動DIV（機頂盒）的排序DIV（底盒）

實際結果：

• 第5項跳到左上角拖過來時rtable - http://i.stack.imgur.com/474OP.jpg

---

似乎從相對於拖元件切換到絕對定位。拖動「禮」切換來自：

<li class="ui-state-default ui-draggable" style="position: relative; left: 52px; top: 9px;">Item 3</li> 

這樣：

<li class="ui-state-default ui-draggable ui-sortable-helper" style="position: absolute; left: 67px; top: 91px; width: 80px; height: 20px;">Item 3</li> 

當將可拖動的項目拖動到可排序對象。

---

這是從jQueryUI的1.8.12相關片段（開始於3041線）：

//The element's absolute position on the page minus margins 
this.offset = this.currentItem.offset(); 
this.offset = { 
    top: this.offset.top - this.margins.top, 
    left: this.offset.left - this.margins.left 
}; 

// Only after we got the offset, we can change the helper's position to absolute 
// TODO: Still need to figure out a way to make relative sorting possible 
this.helper.css("position", "absolute"); 
this.cssPosition = this.helper.css("position"); 

$.extend(this.offset, { 
    click: { //Where the click happened, relative to the element 
     left: event.pageX - this.offset.left, 
     top: event.pageY - this.offset.top 
    }, 
    parent: this._getParentOffset(), 
    relative: this._getRelativeOffset() //This is a relative to absolute position minus the actual position calculation - only used for relative positioned helper 
}); 

//Generate the original position 
this.originalPosition = this._generatePosition(event); 
this.originalPageX = event.pageX; 
this.originalPageY = event.pageY; 

---

有沒有我不使用某些配置選項？

CSS有問題嗎？

或者這是jqueryUI中的錯誤？

Answer 1

跳轉的主要原因是可拖動的'helper'選項未設置爲'clone'。如果你使用克隆助手，跳躍問題就會消失。

如果您需要使用「原始」輔助設置，您仍然會遇到跳躍問題。一種可能的解決方案可能是使用自定義幫助程序選項，如下所示：jQueryUI Draggable Helper Option Help。這個想法是在助手創建時將位置從相對位置轉換爲絕對位置。

下面是一個使用「克隆」幫手的工作演示的鏈接：http://jsfiddle.net/travisrussi/aBhDu/

Answer 2

這似乎是一個自定義的輔助功能解決了這個問題，像這樣：

 $(".draggable").draggable({ 
      connectToSortable: "#sortable", 
      //helper: "original", 
      revert: "invalid", 
      helper: function() { 
       return $(this); 
      } 
     });