Make the boxes stay still when scrolling down using the scroll bar

Question

when I click a box, i can drag it around the screen. You can click the folder icon to open up information view, and a scroll bar will appear because there are a lot of text.

Problem: when i use my mouse to scroll the scrollbar, it also drags the boxes as well. How do I make it not move the box when I click the scroll bar to move the bar?

I am using jsPlumb.draggable() to enable dragging.

jsfiddle: http://jsfiddle.net/7PuN3/2/

Answer 1

I would stop/start dragging:

$(function(){   
$('#1 .button_wrap').on('click', function(e){
    e.stopPropagation();
    $(".info").html(newHtml).show();
    jsPlumb.setDraggable("1", false)


});});


$(function(){
    $("#1").on("click", ".info .ui-icon-close", function(){
        $(".info").hide();
        jsPlumb.setDraggable("1", true)
    });
});

then in your css add this class, not to let the div fade when dragging is disabled:

.ui-state-disabled{opacity: 1;}

Answer 2

Quick look suggests to me, use relative or absolute positioning not fixed on button wrap. On my mobile it seems to work fine though.