2013-05-28 2 views
4

JQuery: 1.9.1JQuery UI несколько сортируемых столбцы: проблема с прокруткой

JQuery UI: 1.10.1

Please See The Fiddle

  <td class="my-column" > 
       <div id="my-div1" class="my-div-class"> 
        <p class="para-item"> para 101 </p> 
       </div> 
      </td> 
      <td> 
       <div id="my-div1" class="my-div-class"> 
        <p class="para-item"> para 201 </p> 
       </div> 
      </td> 

<script> 
    $(".my-div-class").sortable({ connectWith: '.my-div-class' }); 
</script> 

В скрипке, когда пользователь пытается перетащить верхний элемент в списке-1 в нижней части списка-2 полоса прокрутки списка-1 перемещается вместо полосы прокрутки списка-2.

Пробовал различные вещи, но не мог заставить его работать должным образом. Любые входы/предложения очень ценятся.

Спасибо, Ракеш

+0

Кажется, что перетаскиваемый элемент не покидает первый контейнер. Попробуйте сыграть с событиями наведения из двух областей падения, чтобы «переместить» элемент из одного контейнера в следующий, чтобы свиток вел себя правильно. – Gallen

+1

Также вы используете конфликтующие идентификаторы в своей разметке html. Помните, что идентификаторы должны быть уникальными. – Gallen

+0

Спасибо за ответ Галлен. Конечно, я постараюсь поиграть с событиями наведения. –

ответ

10

Если вы не хотите, чтобы изменить фактический файл Src. Существует ручка как часть опции

см the fiddle

sort:function(event,uiHash){ 

    var scrollContainer = uiHash.placeholder[0].parentNode; 
     var overflowOffset = $(scrollContainer).offset(); 
    if((overflowOffset.top + scrollContainer.offsetHeight) - event.pageY < scrollingSensitivity) { 
scrollContainer.scrollTop = scrollContainer.scrollTop + scrollingSpeed; 
    } 
    else if(event.pageY - overflowOffset.top < scrollingSensitivity) { 
     scrollContainer.scrollTop = scrollContainer.scrollTop - scrollingSpeed; 
    } 
    if((overflowOffset.left + scrollContainer.offsetWidth) - event.pageX < scrollingSensitivity) { 
scrollContainer.scrollLeft = scrollContainer.scrollLeft + scrollingSpeed; 
    } 
    else if(event.pageX - overflowOffset.left < scrollingSensitivity) { 
     scrollContainer.scrollLeft = scrollContainer.scrollLeft - scrollingSpeed; 

} 
    } 
+2

Работает красиво !. Большое спасибо. Мне просто пришлось отключить функцию прокрутки сортировки, чтобы исправить небольшую проблему. Fiddle @ http://jsfiddle.net/77YkB/9/ –

1

Глядя на функции _mouseDrag из jquery.ui.sortable.js // Есть ли прокруткой на scrollParent где родитель является контейнером перемещенного элемента. Но родитель должен быть контейнером, где вы собираетесь упасть. Я переместил изменения прокрутки ниже этого ._contactContainers (событие); вместо этого. scrollParent [0]. Я использовал this.currentContainer.element [0], который даст вам реальную емкость и работал ..

if(this.scrollParent[0] !== document && this.scrollParent[0].tagName !== "HTML") { 
    this.overflowOffset = this.currentContainer.element.offset(); 
    var scrollContailer = this.currentContainer.element[0]; 
    if((this.overflowOffset.top + scrollContailer.offsetHeight) - event.pageY < o.scrollSensitivity) { 
    scrollContailer.scrollTop = scrolled = scrollContailer.scrollTop + o.scrollSpeed; 
    } else if(event.pageY - this.overflowOffset.top < o.scrollSensitivity) { 
    scrollContailer.scrollTop = scrolled = scrollContailer.scrollTop - o.scrollSpeed; 
    } 
    if((this.overflowOffset.left + scrollContailer.offsetWidth) - event.pageX < o.scrollSensitivity) { 
    scrollContailer.scrollLeft = scrolled = scrollContailer.scrollLeft + o.scrollSpeed; 
    } else if(event.pageX - this.overflowOffset.left < o.scrollSensitivity) { 
    scrollContailer.scrollLeft = scrolled = scrollContailer.scrollLeft - o.scrollSpeed; 
    } 

} 
+1

спасибо за исправление и входы. Хотя это определенно работает, я ищу способ, которым я не должен касаться источника jquery-ui. Будет обновление, если я что-то найду. Еще раз спасибо –

0

Более простым решением является следующий код:

$("#foo, #bar").sortable({ 
    connectWith: ".foobar", 
    over: function(event, ui) { 
    if (ui.sender) { 
     widget = ui.sender.data("ui-sortable"); 
     widget.scrollParent = $(this); 
     widget.overflowOffset = $(this).offset(); 
    } 
    } 
}); 
0

Вероятно, ваши сортируемыми списки перекрытия по вертикали. См. https://bugs.jqueryui.com/ticket/7065.

Просто используйте статическое измерение, чтобы расположить списки сортировки друг под другом.

Смежные вопросы