Draggable + Sortable & Scrollable Divs

У меня есть контейнер со списком перетаскиваемых элементов и контейнера со списком сортируемых элементов. Перетаскиваемые объекты & подключается к сортируемому списку, позволяя пользователю перетаскивать клоны перетаскиваемых объектов в отсортированный список.Draggable + Sortable & Scrollable Divs

Перетаскиваемые элементы отображаются в вертикальном списке, однако сортируемые элементы отображаются в горизонтальном списке, достигаемом путем их плавания влево. Контейнер сортируемых элементов имеет переполнение, установленное в auto, что приводит к горизонтальной полосе прокрутки, если содержимое переполнено. Два контейнера появляются рядом друг с другом, перетаскиваются влево & сортировки вправо.

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

Вот мой код:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr"> 
<head> 
    <title>Sortables in scrollable divs</title> 
    <script type="text/javascript" language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> 
    <script type="text/javascript" language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script> 
    <script type="text/javascript" language="javascript"> 
     $(function() { 
      $("#sortable").sortable({ 
       start: function(event, ui) { 
        if (ui.helper !== null) console.log("sortable \"" + ui.helper.text() + "\" drag start"); 
       }, 
       stop: function(event, ui) { 
        if (ui.helper !== null) console.log("sortable \"" + ui.helper.text() + "\" drag stopped"); 
        if (ui.item !== null) console.log("sortable item \"" + ui.item.text() + "\" drag stopped"); 
       } 
      }); 

      $("#sortable").sortable("disable"); 

      $("#draggable li").draggable({ 
       connectToSortable: '#sortable', 
       helper: 'clone', 
       revert: 'invalid', 
       cursor: "default", 
       cursorAt: { top: -5, left: -5 }, 
       start: function(event, ui) { 
        if (ui.helper !== null) console.log("draggable \"" + ui.helper.text() + "\" drag start"); 
       }, 
       stop: function(event, ui) { 
        if (ui.helper !== null) console.log("draggable \"" + ui.helper.text() + "\" drag stopped"); 
       } 
      }); 

      $("#container2").mouseenter(function() { 
       console.log("enter sortable container"); 
       $("#sortable").sortable("enable"); 
      }).mouseleave(function() { 
       console.log("leaving sortable container"); 
       $("#sortable").sortable("disable"); 
      }); 

      $("#draggable, #sortable").disableSelection(); 
     }); 
    </script> 
    <style type="text/css"> 
     html, body, p, td, th, li, input, select, option, textarea 
     { 
      font-family: Verdana, Arial, Helvetica, sans-serif; 
      font-size: 11px; 
      color:#343E41; 
     } 

     .wrapper 
     { 
      position: relative; 
      width: 100%; 
      height: 100%; 
      overflow: hidden; 
      height: expression(this.parentNode.offsetHeight + "px"); 
     } 

     .scroll-wrapper 
     { 
      position: relative; 
      width: 100%; 
      height: 100%; 
      overflow: auto; 
      height: expression(this.parentNode.offsetHeight + "px"); 
     } 

     #container1 
     { 
      float:left; 
      width:200px; 
      height:400px; 
      overflow:auto; 
      border:solid #000 1px; 
      margin:5px; 
     } 

     #container2 
     { 
      float:left; 
      width:600px; 
      height:400px; 
      overflow:auto; 
      border:solid #000 1px; 
      margin:5px; 
     } 

     ul#draggable 
     { 
      padding:0; 
      margin:0; 
      list-style-image:none; 
      list-style-position:outside; 
      list-style-type:none; 
     } 

     ul#draggable li 
     { 
      display:block; 
      margin:5px; 
      border:solid #000 1px; 
      height:50px; 
      width:150px; 
     } 

     ul#sortable 
     { 
      padding:0; 
      margin:0; 
      list-style-image:none; 
      list-style-position:outside; 
      list-style-type:none; 
      height:380px; 
      width:744px; 
     } 

     ul#sortable li 
     { 
      display:block; 
      float:left; 
      margin:5px; 
      border:solid #000 1px; 
      height:370px; 
      width:50px; 
      text-align:center; 
     } 
    </style> 
</head> 
<body> 
    <form id="form1" action=""> 
     <div id="container1"> 
      <ul id="draggable"> 
       <li>1A</li> 
       <li>2A</li> 
       <li>3A</li> 
       <li>4A</li> 
       <li>5A</li> 
       <li>6A</li> 
       <li>7A</li> 
       <li>8A</li> 
       <li>9A</li> 
       <li>10A</li> 
       <li>11A</li> 
       <li>12A</li> 
      </ul> 
     </div> 
     <div id="container2"> 
      <ul id="sortable"> 
       <li class="ui-state-default">1</li> 
       <li class="ui-state-default">2</li> 
       <li class="ui-state-default">3</li> 
       <li class="ui-state-default">4</li> 
       <li class="ui-state-default">5</li> 
       <li class="ui-state-default">6</li> 
       <li class="ui-state-default">7</li> 
       <li class="ui-state-default">8</li> 
       <li class="ui-state-default">9</li> 
       <li class="ui-state-default">10</li> 
       <li class="ui-state-default">11</li> 
       <li class="ui-state-default">12</li> 
      </ul> 
     </div> 
    </form> 
</body>

Как я могу избежать сортируемых событий в огнь, пока деталь не перетаскивается по сортируемому контейнеру?

Заранее спасибо

источник

2009-06-19 Raybiez

Это было долгое время, так как я отправил этот вопрос, и с тех пор новые версии JQuery & JQuery UI были освобождены.

Кроме того, команда разработчиков jQuery UI добавила пример перетаскиваемых объектов, связанных с сортируемыми.

Таким образом, я обновил исходный образец кода выше и изменил его так, чтобы он упустил мой сценарий. Мне нужен раздел с горизонтальной прокруткой, который будет автоматически расширяться при добавлении новых элементов.

Мой пример ниже решил проблему, и код выглядит намного чище & проще:


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr"> 
<head> 
    <title>Sortables in scrollable divs</title> 
     <script type="text/javascript" language="JavaScript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script> 
     <script type="text/javascript" language="JavaScript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script> 
     <script type="text/javascript" language="javascript"> 
      $(function() { 
       $("#sortable").sortable({ 
        revert: true, 
        start: function(event, ui) { 
         $(this).width($(this).width() + ui.helper.width() + 12); 
        }, 
        stop: function(event, ui) { 
         var w = 0; 
         $(this).children("li").each(function() { 
          w += $(this).width() + parseInt($(this).css("margin-left")) + parseInt($(this).css("margin-right")) + 2; 
         }); 
         $(this).width(w); 
        } 
       }); 

       var w = 0; 
       $("#sortable").children("li").each(function() { 
        w += $(this).width() + parseInt($(this).css("margin-left")) + parseInt($(this).css("margin-right")) + 2; 
       }); 
       $("#sortable").width(w); 

       $("#draggable li").draggable({ 
        connectToSortable: "#sortable", 
        helper: "clone", 
        revert: "invalid" 
       }); 
       $("ul, li").disableSelection(); 
      }); 
     </script> 
     <style type="text/css"> 
       html, body, p, td, th, li, input, select, option, textarea 
       { 
         font-family: Verdana, Arial, Helvetica, sans-serif; 
         font-size: 11px; 
         color:#343E41; 
       } 

       .wrapper 
       { 
         position: relative; 
         width: 100%; 
         height: 100%; 
         overflow: hidden; 
         height: expression(this.parentNode.offsetHeight + "px"); 
       } 

       .scroll-wrapper 
       { 
         position: relative; 
         width: 100%; 
         height: 100%; 
         overflow: auto; 
         height: expression(this.parentNode.offsetHeight + "px"); 
       } 

       #container1 
       { 
         float:left; 
         width:200px; 
         height:400px; 
         overflow:auto; 
         border:solid #000 1px; 
         margin:5px; 
       } 

       #container2 
       { 
         float:left; 
         width:600px; 
         height:400px; 
         overflow:auto; 
         border:solid #000 1px; 
         margin:5px; 
       } 

       ul#draggable 
       { 
         padding:0; 
         margin:0; 
         list-style-image:none; 
         list-style-position:outside; 
         list-style-type:none; 
       } 

       ul#draggable li 
       { 
         display:block; 
         margin:5px; 
         border:solid #000 1px; 
         height:50px; 
         width:150px; 
       } 

       ul#sortable 
       { 
         padding:0; 
         margin:0; 
         list-style-image:none; 
         list-style-position:outside; 
         list-style-type:none; 
         height:380px; 
       } 

       ul#sortable li 
       { 
         display:block; 
         float:left; 
         margin:5px; 
         border:solid #000 1px; 
         height:370px; 
         width:50px; 
         text-align:center; 
       } 
     </style> 
</head> 
<body> 
    <form id="form1" action=""> 
     <div id="container1"> 
      <ul id="draggable"> 
       <li>1A</li> 
       <li>2A</li> 
       <li>3A</li> 
       <li>4A</li> 
       <li>5A</li> 
       <li>6A</li> 
       <li>7A</li> 
       <li>8A</li> 
       <li>9A</li> 
       <li>10A</li> 
       <li>11A</li> 
       <li>12A</li> 
      </ul> 
     </div> 
     <div id="container2"> 
      <ul id="sortable"> 
       <li class="ui-state-default">1</li> 
       <li class="ui-state-default">2</li> 
       <li class="ui-state-default">3</li> 
       <li class="ui-state-default">4</li> 
       <li class="ui-state-default">5</li> 
       <li class="ui-state-default">6</li> 
       <li class="ui-state-default">7</li> 
       <li class="ui-state-default">8</li> 
       <li class="ui-state-default">9</li> 
       <li class="ui-state-default">10</li> 
       <li class="ui-state-default">11</li> 
       <li class="ui-state-default">12</li> 
      </ul> 
     </div> 
    </form> 
</body>

Думал кто-то, где-то могли бы сделать то же самое и нуждается в помощи: D

источник

2010-11-24 09:56:18 Raybiez

Я положил свой код на jsfiddle, так что это удобно на лету :) [здесь это] (http://jsfiddle.net/dHCkK/) – Luke

Draggable + Sortable & Scrollable Divs

ответ

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