可以拖动为其设置元素的特定区域

Question

我正在使用jQuery创建一个拖放系统，它工作得很好，但我需要让元素的特定区域成为拖动的“触发器”......

这是我的可拖动元素，我需要将红色区域作为触发器，任何想法如何做到这一点？

这是一支笔：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();

Answer 1

您可以使用handle的{​​{1}}属性来实现此目的：

draggable

Updated codepen