SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Apr 2005
    Location
    Helsingborg, Sweden
    Posts
    168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery draggable droppable resizable

    I have elements that are draggable in a list and a droppable area. In that droppable area I have a droppable trashbin that removes the element when dropped on it. This all worked fine until I added resizable to the dropped elements. Now I can't seem to drop the objects on the trashbin anymore. The resizable is the fault. Here's my code:

    Code JavaScript:
    var dropped = false;
    function initDraggableElements()
    {
        jQuery(".draggable_class").draggable({ 
            addClasses: false,
            opacity: 0.8,
            revert: 'invalid',
            containment: '#containment_id_wrapper',
            helper: 'clone',
            appendTo: '#helper',
            start: function(event, ui) {
                dropped = false;
                jQuery(this).addClass("hide");
            },
            stop: function(event, ui) {
                if (dropped==true) {
                    jQuery(this).remove();
                    jQuery("#" + this.id).resizable({
                        containment: '#containment_id'
                    }).parent('.ui-wrapper').draggable({
                        containment: '#containment_id',
                        opacity: 0.8
                    });
                } else {
                    jQuery(this).removeClass("hide");
                }
            }
        });
    }
    function initDroppableTrashbin()
    {
        jQuery("#trashbin").droppable({
            accept: '.draggable_class',
            hoverClass: 'trashbin_hover',
            tolerance: 'touch',
            drop: function(event, ui) {
                ui.draggable.remove();
                var id = ui.draggable.attr('id');
                jQuery("#" + id).remove();
            }
        });
    }
    function initDroppableArea()
    {
        jQuery("#droppable_area").droppable({
            accept: '.draggable_class',
            hoverClass: 'area_hover',
            activeClass: 'area_active',
            drop: function(event, ui) {
                dropped = true;
                jQuery.ui.ddmanager.current.cancelHelperRemoval = true;
                ui.helper.appendTo(this);
            }
        });
    }


    One solution would be to not use the droppable properties of the trashbin but instead calculate on the width, height, and position of the element when dragged and dropped to see if it's dropped on the trashbin. But I would rather use the droppable's code for that. Any hints?

  2. #2
    SitePoint Zealot
    Join Date
    Apr 2005
    Location
    Helsingborg, Sweden
    Posts
    168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've realized that the problem is here that I have to do
    jQuery("#id").resizable().parent('.ui-wrapper').draggable();

    I have to do this since the draggable item is an image. A bug report on this was filed 2 years ago: http://bugs.jqueryui.com/ticket/3446

    Is there a workaround to get this to work with droppable anyway? Or do I have to check position of the draggable manually to see if it's dropped on the trashbin?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •