Jquery UI Draggable /可排序不用鼠標按鈕

我在網站上搜索解決方案，但是沒有找到任何東西。我面臨一個問題，我需要重做拖拽的風格。我正在使用jQuery UI的可拖動/可排序部分。然而，我需要創建一個新的行爲：也就是說，我點擊處理程序，釋放左邊的按鈕，用鼠標移動，元素會粘住光標，再點擊一次，元素就會掉落。總的來說，我需要在拖動過程中禁用mousedown部分。Jquery UI Draggable /可排序不用鼠標按鈕

編輯：

對，所以這裏是一個簡單的排序例子。我需要的是，當我單擊句柄.article-header時，它將粘住鼠標而不用保持mousedown。換句話說，我需要一個行爲，在點擊它時可以使句柄類處於活動狀態，但是在第一次mouseup時仍處於活動狀態，然後在沒有實際持有mousedown的情況下將其拖動到mousemove上，並且在其他單擊時它將會丟棄。

$(".articles:not(.nosort)").sortable({ 
    handle : '.article-header', 
    placeholder: "ui-state-highlight", 
    update : function (ev,that) { 
    var 
     order = $(ev.target).sortable('serialize'); 
     //Saving the order to db 
    } 
}); 


<ul class="articles" data-handler="articles"> 

     <li id="article-list_1"> 
      <div class="article-header"> 
       <h4>Lorem Ipsum 1</h4> 
      </div> 
     </li> 
    <li id="article-list_2"> 
      <div class="article-header"> 
       <h4>Lorem Ipsum 2</h4> 
      </div> 
     </li> 
    <li id="article-list_3"> 
      <div class="article-header"> 
       <h4>Lorem Ipsum 3</h4> 
      </div> 
     </li> 
    <li id="article-list_4"> 
      <div class="article-header"> 
       <h4>Lorem Ipsum 4</h4> 
      </div> 
     </li> 
    <li id="article-list_5"> 
      <div class="article-header"> 
       <h4>Lorem Ipsum 5</h4> 
      </div> 
     </li> 

</ul>

http://jsfiddle.net/s2x2n/

來源

2013-01-18 Coron3r

請提供代碼或例子的jsfiddle伊夫 – Dom

更新後。 – Coron3r

[jQuery Draggable（）和鍵盤控件]的可能重複（http://stackoverflow.com/questions/3282573/jquery-draggable-and-keyboard-control） –

我環顧四周我怎麼$.ui.mouse部件作品，發現該解決方案基本上是很容易的。

我擴展了mouseMove和mouseUp的原型。首先，我不需要檢查鼠標在mouseDown時是否有距離。

其次，我已經評論過這個部分，他們在調用mouseup事件後解除mousemove綁定。因此，您只需要在可排序小部件的更新事件中解除綁定mousemove事件。

我不確定，這是否是正確的方法，但是，如果有人有更好的建議，我會很樂意批准他們的答案。

$.ui.mouse.prototype._mouseMove = function(event) { 
     // IE mouseup check - mouseup happened when mouse was out of window 
     if ($.ui.ie && !(document.documentMode >= 9) && !event.button) { 
      return this._mouseUp(event); 
     } 

     if (this._mouseStarted) { 
      this._mouseDrag(event); 
      return event.preventDefault(); 
     } 

     // if (this._mouseDistanceMet(event) && this._mouseDelayMet(event)) { 
      this._mouseStarted = 
       (this._mouseStart(this._mouseDownEvent, event) !== false); 
      (this._mouseStarted ? this._mouseDrag(event) : this._mouseUp(event)); 
     // } 
     return !this._mouseStarted; 
    } 
$.ui.mouse.prototype._mouseUp = function(event) { 
     $(document) 
      // .unbind('mousemove.'+this.widgetName, this._mouseMoveDelegate) 
      .unbind('mouseup.'+this.widgetName, this._mouseUpDelegate); 

     if (this._mouseStarted) { 
      this._mouseStarted = false; 

      if (event.target === this._mouseDownEvent.target) { 
       $.data(event.target, this.widgetName + '.preventClickEvent', true); 
      } 

      this._mouseStop(event); 
     } 

     return false; 
    }

可排序更新功能

update : function (ev,that) { 
    $(document).unbind('mousemove.'+$.ui.sortable.prototype.widgetName, $.ui.mouse.prototype._mouseMoveDelegate); 
}

來源

2014-11-08 11:41:06

Jquery UI Draggable /可排序不用鼠標按鈕

回答

相關問題