CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-sortable
Mike
Mike

Reputation: 182

Starting a JQuery Div Drag by clicking on an image

I have a form that can have multiple div elements like below on it. enter image description here

I want to be able to only click on the move icon (third icon from the right in the top bar of any section) and start a sortable drag of that step within it's viewport.

The parent div is created as:

<div id="add_steps" class='wrapper">
</div>

With each step being added to it as needed.

I know about coding something like the following, but this allows clicking anywhere within the Div to start dragging it, but I only want it to start dragging when the icon is clicked on:

    //Reordering the Steps
    $(document).ready(function () {
        $("#add_steps").sortable({
            cursor: 'move',
            opacity: 0.8,
            helper: function (e, div) {
                var $originals = div.parent();
                var $helper = div.clone();

                $helper.parent().each(function (index) {
                    // Set helper cell sizes to match the original sizes
                    $(this).width($originals.eq(index).width());
                });
                return $helper;
            }
        });
        $("#add_steps").disableSelection();
    });

I've seen some references to using a .trigger() but I couldn't see how to implement it here.

I'm still somewhat of a newbie on JQuery so I appreciate as much details as possible. Thanks to anyone who can help me.

Edited I did get this to work partially. I was able to basically put the above code that was working at the document level into the onmousedown event of the image. But I haven't been able to turn it off afterwards. I tried using the onmouseup event but that never seems to be called so I'm assuming the sorting drag/dropping action overrides the mouse up event?

Is there anyway to get an end action event on the sortable? I'll need someway to know when the dragging finished so the step numbers can be readjusted.

Edited Well that got me to searching for other resolutions and close at: jQuery UI Sortable stop event after drag and drop

I came up with this for my onmousedown event:

    //Function for Moving a Step Containing Exceptions
    var moveExceptionStep = function (divid, deleteFieldId) {
        $("#add_steps").sortable({
            cursor: 'move',
            opacity: 0.8,
            helper: function (e, div) {
                var $originals = div.parent();
                var $helper = div.clone();

                $helper.parent().each(function (index) {
                    // Set helper cell sizes to match the original sizes
                    $(this).width($originals.eq(index).width());
                });
                return $helper;
            },
            stop: function (e, div) {
                $("#add_steps").sortable("disable");
                $("#add_steps").enableSelection();
            }
        });
        $("#add_steps").disableSelection();
    }

This does turn off the dragging within the entire div, but I can't enable it again by clicking on the icon. So what am I doing wrong?

Upvotes: 1

Views: 372

Answers (1)

Blue Boy
Blue Boy

Reputation: 610

You can use a 'handle'

Like so:

$("#add_steps").sortable({
    cursor: 'move',
    opacity: 0.8,
    handle: ".icon" // your icon
    // other stuff you might need
});

Upvotes: 1

Related Questions