JQuery UI, draggable не завивание поддающегося сортировке контейнера

Question

JQuery UI, draggable не завивание поддающегося сортировке контейнера

У меня есть некоторые draggable пункты (#draggable литий), который я - перетаскивание их в поддающемся сортировке (#sortable).

Поддающееся сортировке обернуто двумя отделениями, и у наиболее удаленного отделения есть переполнение-y: свиток. Механизм сопротивления и снижения хорошо работает, пока поддающийся сортировке список не расширяется и завивается.

Когда я пытаюсь тянуть и непосредственно уронить Пункт на поддающееся сортировке, я не могу заставить поддающийся сортировке scrollbar автозавиваться в пути, которым я хочу пойти (скажите, хотят повыситься, чтобы понизиться выше первого элемента или понизиться, чтобы опуститься ниже последнего элемента). Но когда я пытаюсь тянуть и сортировать пункты между собой автосвитки полосы прокрутки, таща.

Действительно ли это - ошибка, или там действительно ли ошибка - способ, которым работает мой код.

Вот полный код:

<body>
    
        Item 1
        Item 2
        Item 3
        Item 4
        Item 5
        Item 6
    

  <div id="outerDiv">
    <div id="innerDiv">
      
      
    </div>
  </div>
</body>

//CSS

#sortable, #draggable { 
  list-style-type: none; 
  margin: 0; 
  padding: 0 0 2.5em; 
  margin-right: 10px; 
}
#sortable li, #draggable li { 
  margin: 0 5px 5px 5px; 
  padding: 5px; 
  font-size: 1.2em; 
  width: 120px; 
}
.marker{
    background: none repeat scroll 0 0 #DDDDDD;
    border-bottom: 1px solid #BBBBBB;
    border-top: 1px solid #BBBBBB;
    display: block;
    height: 20px;
    width: 100%;
    text-align: center;
    vertical-align: middle;
    color: #666;
    font-size: 18px;
    font-style: italic;
}

#outerDiv{
    background: none repeat scroll 0 0 #EEEEEE;
    height: 100%;
    right: 0;
    position: absolute;
    overflow-y: scroll; 
    top: 0;
    width: 300px;
}

#innerDiv{
    border: 1px solid #CCCCCC;
    min-height: 400px;
    position:absolute;
}
#sortable{
    width: 200px;
    padding: 10px;
    border : 1px solid black;
    min-height: 230px;
}

#draggable{
    position:absolute;
    top:0;
    left:0;
}
.big{
    height: 80px;
}

//JS

$(function() {
  $( "#sortable" ).sortable({
       placeholder: "marker",
       axis: "y",
  });

  $("#draggable li").draggable({
      helper: "clone",
      cursor: "move",
      revert: "invalid",
      revertDuration: 500,
      connectToSortable: "#sortable"
  });
});

demo on fiddle http://JSfiddle.net/8KDJK/21/

Любая помощь значительно ценилась бы. Спасибо:)

4

добавлено 09 Январь 2013 в 04:40 автор Mandeep Jain отредактировано 10 Январь 2013 в 09:04

Просмотры: 3

источник

nl ja de

2 ответы

Видеокурс "Создание приложений для Android"

Получи множество видеоуроков по Android сейчас

Я не уверен, что это - ошибка, но это не находится в классическом сценарии.

I spent a lot of time to find a workaround some months ago and here is my solution : http://jsfiddle.net/8KDJK/23/

Это работает в течение многих месяцев теперь без проблемы.

Идея состоит в том, чтобы приложить клона элемента к прокручиваемому контейнеру во время строительного отзыва помощника, затем приложить помощника к телу, используя функцию setTimeout после 1 мс, чтобы быть в состоянии тянуть все вокруг веб-страницы.

  $("#draggable li").draggable({
      cursor: "move",
      revert: "invalid",
      revertDuration: 500,
      connectToSortable: "#sortable",

      //Here is the workaround 
      //**********************

      containment: 'body',
      helper: function(){ 
        //Hack to append the element to the body (visible above others divs), 
        //but still bellonging to the scrollable container  
        $('#sortable').append('<div id="clone" class="ui-state-default big">' + $(this).html() + '</div>');   
        $("#clone").hide();
        setTimeout(function(){
            $('#clone').appendTo('body'); 
            $("#clone").show();
        },1);
        return $("#clone");
    }
  });

Link to my previous question : JqueryUI, drag elements into cells of a scrolling dropable div containing large table

6

добавлено 10 Январь 2013 в 08:55 автор sdespont

источник

Удивительный - поиск решения для этого в течение многих месяцев.

добавлено 24 Декабрь 2015 в 06:21, автор JoeTidee, источник

Большое спасибо это помогло мне много с проблемой блокирования. Спасибо!

добавлено 11 Май 2014 в 01:28, автор Vincent Duprez, источник

К сожалению, вы can' t варианты сброса во время перемещения.

добавлено 12 Январь 2013 в 11:22, автор sdespont, источник

Плохие новости для вас, но яркая сторона - то, что я проверил свою скрипку jsfiddle.net/QvRjL/134 с IE8 и это работает. Так проверяют различия, это мог быть CSS расположение проблемы.

добавлено 17 Январь 2013 в 06:51, автор sdespont, источник

@VincentDuprez, довольный помочь вам, мне требуются часы, чтобы сделать его работой...

добавлено 11 Май 2014 в 06:54, автор sdespont, источник

Эй это работает. Возможно, таща, мой элемент был все еще приложен к телу, следовательно это не была часть того прокручиваемого контейнера. Я пытался приложить его к прокручиваемому контейнеру на ' over' событие поддающегося сортировке, но это не работало на меня. Следовательно я использовал бы вашу работу на данный момент. Спасибо:)

добавлено 12 Январь 2013 в 05:51, автор Mandeep Jain, источник

Ohh, не сделал знал это. Спасибо.

добавлено 14 Январь 2013 в 05:12, автор Mandeep Jain, источник

Я просто обнаружил то ваше решение, хотя работы большой iin FF и Хром, не работает в IE 8. Я пытался отладить и искать решение, но не мог найти много. Вы могли знать лучше?

добавлено 17 Январь 2013 в 06:17, автор Mandeep Jain, источник

изучит его. спасибо:)

добавлено 17 Январь 2013 в 07:13, автор Mandeep Jain, источник

Это работает, имел тривиальную опечатку в моем коде, который не подходил к (печальному) IE 8

добавлено 28 Январь 2013 в 01:09, автор Mandeep Jain, источник

работы для нас. вы могли объяснить свою проблему подробно

добавлено 15 Март 2013 в 07:30, автор Mandeep Jain, источник

sdespont, это, действительно кажется, работает в вашей скрипке, возможно у абсолютного положения есть что-то, чтобы сделать с ним, но я can' t заставляют его работать над простым UL с высотой и overflow:scroll jsfiddle.net/GDmac/9v6ce

добавлено 23 Май 2014 в 11:39, автор GDmac, источник

просто используя стандарт appendTo тело doesn' t работа

добавлено 09 Март 2013 в 06:42, автор user2152192, источник

Видеокурс по Java для начинающих

Получи видеокурс по Java для начинающих с упражнениями

автор SirCumz · Answer 1 · 2013-12-18T06:09Z

Решение:

Не используйте overflow:auto;

Но

переполнение: видимый;

2

добавлено 18 Декабрь 2013 в 06:09 автор SirCumz

источник

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

добавлено 18 Сентябрь 2015 в 12:43, автор Tim, источник