Apply double click on draggable items

Question

I have a yellow button that can be dragged and dropped on the gray panel. I use \"handleDragStop\" function to handle all the tasks that need to be done when users drag and drop

Answer 1

Your handleDragStop() function should work fine in both event handlers. The only draggable-specific code in it was $('#content .top-icon').after(current_text); and CMIIW but I don't see why you couldn't do $('#content').append(current_text); just as well, which would work in both cases. Try this: http://jsfiddle.net/tonicboy/Tt7Fb/

JS:

$(function () {

    $('#content').sortable({
        placeholder: 'ui-state-highlight'
    });


    $(".top-icon").draggable({
        connectToSortable: '#content',
        helper: myHelper,
        stop: handleDragStop
    }).dblclick(function(e) {

    handleDragStop(e);

});;


    function myHelper(event) {
        return $(this).clone();
    }

    var i = 1;

    function handleDragStop(event, ui) {
        debugger;

        var current_text = '
Yellow Box ' + i + '' + '
' + '
Item 1
' + '
Item 2
' + '
Item 3
' + '
Add New Item
' + '
' + '
';
        $('#content').append(current_text);

        i++;

        var $new_insert_item = $('#content .top-icon').next();
        $('#content .top-icon').remove(); // remove the clone .top-icon inside #content

        console.log('hi');
        // when click on Add New Item button



    }
    // end of handleDragStop


    $('#content').on('click', '.add-item', function () {

        var $this = $(this);
        var item_count = $this.siblings('.item').length + 1;
        console.log(item_count);

        var str_item = '';
        str_item = '
Item ' + item_count + '
';

        $(str_item).insertBefore($this);


    });
});