jQueryUI Draggable + Sortable忽略句柄

Question

我主要想知道是否有其他人遇到了這個問題，當從jQueryUI中結合Draggable和Sortable插件。

如果我只是使用Draggable插件，它服從我在設置中指定的handle。但是，只要我在放置目標上設置了Sortable，Draggable似乎會警告風，並讓您拖動整個元素，完全忽略我指定的句柄。

$('.column-one, .column-two, .column-three').sortable({ revert : 150 }); 

$('.tile').parent().draggable({ 
    start: function() {}, 
    stop: function() {}, 
    handle: '.tile-draggable', 
    connectToSortable: '.column-one, .column-two, .column-three' 
}); 

我在這裏已經設置一個的jsfiddle，所以你可以看到我在談論： https://jsfiddle.net/4y8a8zpe/2/

註釋掉JS的第一行看到手柄正常工作。

注意：設置此JSFiddle時，我似乎也遇到了一些奇怪的CSS問題，但可以隨意忽略它。

Answer 1

你或許可以逃脫一個或另一個 - 他們是非常相似的功能。如果沒有，排序也有句柄選項。

http://api.jqueryui.com/sortable/#option-handle

$('.column-one, .column-two, .column-three').sortable({ 
 
    revert: 150, 
 
    handle: '.tile-draggable' 
 
}); 
 

 
$('.tile').parent().draggable({ 
 
    start: function() {}, 
 
    stop: function() {}, 
 
    handle: '.tile-draggable', 
 
    connectToSortable: '.column-one, .column-two, .column-three' 
 
});

.column-one, 
 
.column-two, 
 
.column-three { 
 
    display: inline-block; 
 
    width: 320px; 
 
    height: 600px; 
 
    padding: 0 10px; 
 
    background-color: #fffbf2; 
 
    margin-right: 10px; 
 
    box-sizing: border-box; 
 
} 
 
.abstract_tile { 
 
    display: block; 
 
    width: 300px; 
 
    background-color: #fff2f6; 
 
} 
 
.tile { 
 
    width: 300px; 
 
    border: solid 1px #ccc; 
 
} 
 
.tile-top { 
 
    background-color: #e3ffec; 
 
    text-align: center; 
 
    padding: 10px; 
 
} 
 
.tile-bottom { 
 
    display: block; 
 
    width: 100%; 
 
    height: 100px; 
 
    overflow-x: hidden; 
 
    overflow-y: auto; 
 
} 
 
.tile-footer { 
 
    background-color: #e3ffec; 
 
    text-align: center; 
 
    padding: 10px; 
 
} 
 
.tile-footer .left { 
 
    float: left; 
 
} 
 
.tile-footer .right { 
 
    float: right; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script> 
 

 

 
<div class="column-one"> 
 
    <div class="abstract_tile"> 
 
    <div class="tile"> 
 
     <div class="capped-module primary"> 
 
     <div class="wrap"> 
 
      <div class="tile-top tile-draggable"> 
 
      <h2>Title</h2> 
 
      </div> 
 

 
      <div class="tile-bottom"> 
 
      <ul> 
 
       <li>Item #1</li> 
 
       <li>Item #2</li> 
 
       <li>Item #3</li> 
 
       <li>Item #4</li> 
 
       <li>Item #5</li> 
 
       <li>Item #6</li> 
 
       <li>Item #7</li> 
 
       <li>Item #8</li> 
 
       <li>Item #9</li> 
 
      </div> 
 

 
      <div class="tile-footer tile-draggable"> 
 
      <div class="left">Move</div> 
 
      <div class="right">Add/Remove</div> 
 
      <div style="clear: both;"></div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 

 

 
</div> 
 

 
<div class="column-two"></div> 
 

 
<div class="column-three"></div>