CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-ui
Ryan
Ryan

Reputation: 15270

How can I change the content of a large draggable item so that it's easier to drop?

Here's a fiddle: http://jsfiddle.net/adMXj/

I have large draggable items that need to be dropped into smaller containers. This is fine when the container and item are similar sizes, but not good when it's a large draggable element.

Upon drag I'd like the draggable content to change to "selected items".

Can you help?

Try it out yourself here and notice how little droppable area you have depending where on the draggable item you click to drag.

enter image description here

Here's my JS:

$('.items > li').draggable({
    revert: "invalid",
    helper: function(event) {
        var helperList = $('<ul class="draggable-helper">');
        if ($(this).is('.active')){
            helperList.append($(this).siblings('.active').andSelf().clone());
        } else {
            helperList.append($(this).clone());
        }
        return helperList;
    }
});

$('.drop-containers li').droppable({
    drop: function(event, ui) {
        console.log('dropped');
        var $this = $(this);
        var selectedObjects = new Array();
        if (ui.draggable.hasClass('active')) {
            console.log('active');
            // get all active items
            $('ul.items > li.active').each(function() {
                console.log($(this).attr('id'));
                selectedObjects.push($(this).attr('id'));
                $(this).remove();
            });
        } else {
            console.log('not active');
            selectedObjects.push(ui.draggable.attr('id'));
            ui.draggable.remove();
        }
        $this.append(', ' + selectedObjects.join(', '));
    }
});

Upvotes: 1

Views: 254

Answers (2)

Tomas
Tomas

Reputation: 597

I've dealt with this issue by changing the tolerance on the droppable items.

$('.drop-containers li').droppable({
  tolerance : 'pointer'
});

Changing tolerance is a good solution so you don't have to alter the appearance of the dragged object nor that of the droppable object. If you want to drop draggable items easier, change the tolerance to 'pointer' or 'touch'

Tolerance specifies which mode to use for testing whether a draggable is hovering over a droppable. Possible values:

  • "fit": Draggable overlaps the droppable entirely.
  • "intersect": (default) Draggable overlaps the droppable at least 50% in both directions.
  • "pointer": Mouse pointer overlaps the droppable.
  • "touch": Draggable overlaps the droppable any amount.

http://api.jqueryui.com/droppable/#option-tolerance

Upvotes: 2

RandomWebGuy
RandomWebGuy

Reputation: 1439

I'm not entirely sure, but I think this is what your after. Please check this out: http://jsfiddle.net/XuZvA/1/

I'm using the drag event to modify the helper object.

Upvotes: 2

Related Questions