javascript - jeditable accidentally triggering on Draggable on nested items - Stack Overflow

admin管理员组

文章数量:1429060

I'm using jquery-ui's draggable for drag-and-drop, and jeditable for inline editing.

When I drag and drop an element that's also editable, right after it's dropped jeditable kicks in and pops into 'edit mode'.

How can I disable this behavior?

Edit - the problem happens because of netsting - see this example. I also added draggable to the mix to make the example more realistic (the actual real problem is in this site that I'm working on)

Note - even though this question has an accepted answer because of the bounty rules, the problem is still not resolved for me.

I'm using jquery-ui's draggable for drag-and-drop, and jeditable for inline editing.

When I drag and drop an element that's also editable, right after it's dropped jeditable kicks in and pops into 'edit mode'.

How can I disable this behavior?

Edit - the problem happens because of netsting - see this example. I also added draggable to the mix to make the example more realistic (the actual real problem is in this site that I'm working on)

Note - even though this question has an accepted answer because of the bounty rules, the problem is still not resolved for me.

• javascript
• jquery
• jquery-ui
• draggable
• jeditable

Share Improve this question Follow edited Jun 5, 2010 at 8:09 munity wiki
5 revs
ripper234 1

• 2 I read the title has "jedi table" – Jimmy Commented Jun 4, 2010 at 17:47

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 5 +100

UPDATED 2: use children()

DEMO 2: http://jsbin./izaje3/2

in responce to your ment

$(function() {
    $('.editable').editable();
    $('.draggable').draggable({
        drag: function(event, ui) {
            $(this).children('div').removeClass('editable')
        },
        stop: function(event, ui) {
           $(this).children('div').addClass('editable')
        }
    });
});​

DEMO: http://jsbin./ihojo/2

$(function() {
    $(".draggable").draggable({
        drag: function(event, ui) {
            $(this).unbind('editable')
        }
    });
    $(".editable").editable();
});

OR you can do like this:

$(function() {
    $('.editable').editable();
    $('.draggable').draggable({
        drag: function(event, ui) {
            $(this).removeClass('editable')
        },
        stop: function(event, ui) {
            $(this).addClass('editable')
        }
    });
});

Assuming you have something like this:

<div class="draggable editable"></div>  

NOTE: just for sake, you can also take advantage by using the handle method!

http://jqueryui./demos/draggable/#handle

I found this post because I came across this exact problem (nested jEditable inside a jQuery UI Draggable) today; while I don't think my solution is particularly elegant I felt like I ought to share it in case someone else has the same problem.

Instead of trying to unbind and reinitialize the jEditable on the drag events (which seems to fire the click event AFTER the reinitialization on stop()), I found it easier to set the jEditable to use a custom event which is only triggered on mouseup if the draggable wasn't dragged (simulating a click).

The anonymous function as the first argument of editable should be replaced with the url you're POSTing to if that's your thing.

http://jsbin./izaje3/13

var notdragged = true;
$('.editable').editable(function(value, settings) {
        return value;
    }, {event : 'custom_event'
});
$('.draggable').draggable({
    start: function(event, ui) {
        notdragged = false;
    }
});

$('.editable').bind('mousedown', function() {
    notdragged = true;
}).bind('mouseup', function() {
    if (notdragged) {
        $(this).trigger("custom_event");
    }
});

oftomh, you should try and get a hold of the Event object within the drop handler, and then try to call event.preventDefault(), event.stopImmediatePropagation() or event.stopPropagation()

luckily for you you're on jQuery. Doing so cross-browserly with vanilla JS is annoying.

Ripper,

One possible workaround is to use the double click event for your jEditable ponent.

To do this, just initialize the jEditable object with the following option:

event: 'dblclick'

You could try setting contenteditable="false" on these items. Just try adding this attribute in the relevant html tag and see what happend.

本文标签： javascriptjeditable accidentally triggering on Draggable on nested itemsStack Overflow