CODEWITHSUNDEEP
javascriptjqueryjquery-ui
Caio Kawasaki
Caio Kawasaki

Reputation: 2950

Set specific region of an element for it can be dragged

I'm creating a drag and drop system with jQuery, it's working perfectly, but i need to make just a specific region of the element a "trigger" for the drag...

This is my draggable element, I need to make the red area the trigger, any idea of how to do this?

enter image description here

Here is a pen: 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();

Upvotes: 2

Views: 123

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

You can use the handle property of draggable to achieve this:

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

Updated codepen

Upvotes: 3

Related Questions