爲它設置一個元素的特定區域可以拖動

我用jQuery創建了一個拖放系統，它工作的很完美，但是我需要爲元素的特定區域製作一個「觸發器」。 ..爲它設置一個元素的特定區域可以拖動

這是我的可拖動元素，我需要使紅色區域的觸發器，任何想法如何做到這一點？

enter image description here

這裏是筆：http://codepen.io/caiokawasaki/pen/qdqJKx

HTML

<div id="groupItems1" class="list-item"> 
    <div class="single-list-item"> 
     <div class="trigger"></div> 
     <div class="title">Header</div> 
    </div> 
    <div class="single-list-item"> 
     <div class="trigger"></div> 
     <div class="title">Formulário de contato</div> 
    </div> 
    <div class="single-list-item"> 
     <div class="trigger"></div> 
     <div class="title">Fotter</div> 
    </div> 
</div> 

<ul id="groupItems2" class="itemsList"> 
    <li>fdsfdsfds</li> 
    <li>fdsfdsfds</li> 
    <li>fdsfdsfds</li> 
    <li>fdsfdsfds</li> 
    <li>fdsfdsfds</li> 
</ul>

jQuery的

$("#groupItems2").sortable({ 
    revert: true, 
    stop: function(event, ui) { 
     if(!ui.item.data('tag') && !ui.item.data('handle')) { 
      ui.item.data('tag', true); 
      ui.item.fadeTo(400, 0.1); 
     } 
    } 
}); 
$("#groupItems1").find(".single-list-item").draggable({ 
    connectToSortable: '#groupItems2', 
    helper: 'clone', 
    revert: 'invalid' 
}); 
$("ul, li").disableSelection();

來源

2015-05-27 Caio Kawasaki

您可以使用draggable的handle屬性來實現這一目標：

$("#groupItems1").find(".single-list-item").draggable({ 
    connectToSortable: '#groupItems2', 
    helper: 'clone', 
    revert: 'invalid', 
    handle: '.trigger' 
});

Updated codepen

來源

2015-05-27 12:34:47

尼斯，我不知道這個屬性... –

爲它設置一個元素的特定區域可以拖動

回答

相關問題