1

I've used some complex javascript (jQuery) to create an editor of sorts where users can drag, drop and resize different divs. The problem is that sometimes, for seemingly no reason, divs that contain text suddenly get "frozen" or "stuck" on the containing div and cannot be dragged around, despite still maintaining a class list that includes ui-draggable, right after I mention:

$this.draggable( "option", "disabled", false );

So technically there's no reason why the dragging should stop. I used Ctrl+Shift+K to use the web console of firebug but when I drag things around that doesn't trigger anything on the console, and the fact that I can't drag one particular around also doesn't show anything up. I've tried profiling but these things just tell how much time is spent in a certain script. How can I possibly figure out why an element's drag just gets turned off and cannot be turned on again? I can't put breakpoints because I don't know where in the code something's going wrong. It almost seems arbitrary. Is there any way to to simply see what's happening on the stack in realtime?

Edit

In Firebug we can see an entire list of properties for an object, much more than what fits in this little screenshot below. Does anyone have any idea which object properties I should concerned with, that pertain to an issue like mine? I'm really lost on how to diagnose the problem.

Firebug Object details

6
  • are you sure $this is what you think it is?
    – jbabey
    Feb 18, 2013 at 13:48
  • I do. In the console, I even did $('#elementID').draggable('option','disabled',false); and it still couldn't be dragged. But if I use .text() with the same element ID, I get the text alright. So there's nothing wrong in selecting the element.
    – user961627
    Feb 18, 2013 at 14:00
  • 1
    This highly likely a problem with "too many bindings". To debug this issue you need to break you code down in sections and test each round where you add more of the functionality/DOM elements. Eventually you'll see what will happen. jQuery probably overwrites bindings on the fly, thus sometimes breaking existing drag-drop sessions it holds.
    – user1467267
    Feb 18, 2013 at 16:34
  • I am doing quite two bindings and unbindings based on mouseovers - I'm binding objects to both resizable and draggable, and a host of other events. Would it be better to simply destroy the binding and bind again, rather than using 'option', 'disabled'?
    – user961627
    Feb 18, 2013 at 20:11
  • Can you set up a demo that shows the issue? Perhaps on JSFiddle? Usually that goes a long way in determining/narrowing down the issue. Feb 18, 2013 at 23:26

1 Answer 1

0

@Allendar - too many bindings was indeed the issue. I followed up with this question: Am I binding events over and over again in this jQuery code? and with the help of Visual Event, I got rid of bindings that I was doing over and over again, and then it worked fine.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.