Как отключить перетаскиваемый div, когда полоса прокрутки сосредоточена в JQuery

Question

У меня есть jQuery перетаскиваемый контейнерный контейнер с боковой полосой прокрутки, который не должен перетаскиваться при прокрутке вверх и вниз..infotext - это внутренний div, содержащий текст, содержащийся в #infobody, для которого установлено переполнение: auto.Мне нужен способ отменить перетаскиваемую функцию на div, когда выбрана полоса прокрутки.Вот мой код:

$(".lsidebar").draggable({"scroll":false});

 .lsidebar #infobody{
cursor:default;
position:absolute;
width:100%;
overflow:auto;
margin:23px 0 0 0;
z-index:14;
}

   #infobody .infotext{
cursor:default;
position:relative;
width:100%;
z-index:14;
color:#969696;
}

Answer 1

На самом деле вы можете использовать свойство "cancel" в draggable, чтобы предотвратить влияние события прокрутки на перетаскиваемый элемент.

Например:

если ваш html такой ...

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

для js:

$('.draggable').draggable({
   cancel: '.scrollable'
});

При прокрутке в этой конкретной области внешний перетаскиваемый элемент будет временно отключен.

Answer 2

это работает для меня, я использую jquery ui 1.8.2.

      $(".drag").draggable({
                        start: function(e, ui) {
                        if ($(e.originalEvent.target).is(".scroll"))
                            e.preventDefault();
                        }
                    })

Answer 3

Обходной путь к этой проблеме (потому что по какой-то причине никто не отвечает на мои вопросы в последнее время) заключался в замене полосы прокрутки браузера по умолчанию на полосу прокрутки jQuery, известную как jScrollPane.Это позволяет мне использовать вставленный идентификатор полосы прокрутки в качестве селектора, чтобы отключить перетаскивание ... вот так:

 $('.jScrollPaneDrag').live('mousedown mouseup', function(e){
     if(e.type=='mousedown'){
         $('.lsidebar').draggable({disable: true});
     }else{
         $('.lsidebar').draggable({"scroll":false});
     };
 });

Answer 4

Я думаю, это может нормально работать

$("div")
.mouseenter(function(){...bind drag;})
.mouseleave(function(){...unbind drag;});

Answer 5

Вы можете привязать событие прокрутки к текущему элементу и всем его дочерним и родительским элементам, как это сделано ниже, при прокрутке перетаскивание будет отключено:

• Текущий перетаскиваемый элемент
• Все потомки перетаскиваемого элемента
• Все перетаскиваемые родители перетаскиваемого элемента

отметьте это JSFIDDLE .

$(function () {
    $(".draggable").draggable({
        start: function () {
            // cancel draggin while scrolling
            if ($(this).data("scrolled")) {
                $(this).data("scrolled", false).trigger("mouseup");
                return false;
            }
        }
    }).find("*").andSelf().scroll(function () {
        // Bind to the scroll event on current element, and all its children.

        // Prevent all draggable parents from dragging while they are scrolling
        $(this).parents(".ui-draggable").data("scrolled", true);
    }); });

Answer 6

Попробуйте добавить overflow:hidden; в css для page_wrapper.