Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.03.2013, 01:36
Новичок на форуме
Отправить личное сообщение для Dzib Посмотреть профиль Найти все сообщения от Dzib
 
Регистрация: 29.03.2013
Сообщений: 8

Горизонтальный sortable
Привет всем, начинаю изучать jquery, очень понравился sortable. Увидел примеры тут: http://jquery.page2page.ru/index.php...лементы

Ну на сколько я понимаю список вертикальный, а можно сделать горизонтальный список?
Всем спасибо за ответы.
Ответить с цитированием
  #2 (permalink)  
Старый 30.03.2013, 01:43
Аватар для zilker
Профессор
Отправить личное сообщение для zilker Посмотреть профиль Найти все сообщения от zilker
 
Регистрация: 30.07.2011
Сообщений: 189

Вы не поверите, можно даже таблицей - http://jqueryui.com/sortable/#display-grid
Ответить с цитированием
  #3 (permalink)  
Старый 30.03.2013, 02:05
Новичок на форуме
Отправить личное сообщение для Dzib Посмотреть профиль Найти все сообщения от Dzib
 
Регистрация: 29.03.2013
Сообщений: 8

О спасибо, а можно каким то методом узнать порядок элементов, после перетаскивания? буду очень презнателен.
Ответить с цитированием
  #4 (permalink)  
Старый 30.03.2013, 02:28
Аватар для zilker
Профессор
Отправить личное сообщение для zilker Посмотреть профиль Найти все сообщения от zilker
 
Регистрация: 30.07.2011
Сообщений: 189

Да, есть метод .toArray(). Возвратит массив id элементов. Можно передать свой атрибут, тогда вместо id будет ваш атрибут. Подробнее здесь.
Ответить с цитированием
  #5 (permalink)  
Старый 30.03.2013, 14:53
Новичок на форуме
Отправить личное сообщение для Dzib Посмотреть профиль Найти все сообщения от Dzib
 
Регистрация: 29.03.2013
Сообщений: 8

Большое спасибо, подскажите ещё, есть ли метод для задавания максимального количеста элемента в списке? если я хочу два списка коннектед сделать и перетаскивать из одного во второй.
Ответить с цитированием
  #6 (permalink)  
Старый 30.03.2013, 16:16
Аватар для zilker
Профессор
Отправить личное сообщение для zilker Посмотреть профиль Найти все сообщения от zilker
 
Регистрация: 30.07.2011
Сообщений: 189

Вам так сложно посмотреть полную документацию? http://jqueryui.com/sortable/#connect-lists
Ответить с цитированием
  #7 (permalink)  
Старый 30.03.2013, 19:07
Новичок на форуме
Отправить личное сообщение для Dzib Посмотреть профиль Найти все сообщения от Dzib
 
Регистрация: 29.03.2013
Сообщений: 8

Спасибо, это я видел, но как сделать, если я хочу что б в список максимально 7 элемнтов можно было добавить? Это возможно?
Ответить с цитированием
  #8 (permalink)  
Старый 30.03.2013, 19:15
Аватар для zilker
Профессор
Отправить личное сообщение для zilker Посмотреть профиль Найти все сообщения от zilker
 
Регистрация: 30.07.2011
Сообщений: 189

Все равно не пойму, с чем у вас проблемы. 7 элементов горизонтально? Ну так подсчитайте, сколько они займут место (ширина, поля и отступы) и ограничьте тег UL, в котором они будут находится, по ширине. Тогда 8й и последующие перейдут на 2ю строку.
В примере с сеткой там 4 элемента в строке. Увеличиваете width у ul до 540px - вмещаются 5 элементов.
Ответить с цитированием
  #9 (permalink)  
Старый 30.03.2013, 19:55
Новичок на форуме
Отправить личное сообщение для Dzib Посмотреть профиль Найти все сообщения от Dzib
 
Регистрация: 29.03.2013
Сообщений: 8

Я приведу пример своего кода:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link type="text/css" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" type="text/javascript"></script>

<style type="text/css">
    body{font:9pt Arial,sans-serif;}
    
	.connectedSortable{list-style-type:none; margin:20px 20px 20px 20px; padding:0px 0px; width:320px; height:50px; background-color:#ddd;  border: 4px double black;}
    .connectedSortable li{float:left;margin:1px 1px 1px 1px; text-align:center; font-size:1.4em; height:50px; width:100px; background-color:#fff; border:1px solid #888}
	#sortable4{height:110px}
</style>

<script type="text/javascript">
  $(function() {
   
 $( ".connectedSortable" ).sortable({
      connectWith:".connectedSortable"
    }).disableSelection(); // для отмены выделения текста на элементах   
	   
  });
  function messageWrite() {  
  var result1 = $( "#sortable1" ).sortable( "toArray" ); 
  var result2 = $( "#sortable2" ).sortable( "toArray" );
  var result3 = $( "#sortable3" ).sortable( "toArray" );
 document.writeln(result1+"</br>"+result2+"</br>"+result3);  
}
</script>
</head>

<body>
 <ul id="sortable1" class="connectedSortable">

  </ul>
  <ul id="sortable2" class="connectedSortable">

  </ul>
  <ul id="sortable3" class="connectedSortable">
  </ul>
  
  <ul id="sortable4" class="connectedSortable">
  <li id="1">1</li>
  <li id="2">2</li>
  <li id="3">3</li>
  <li id="4">4</li>
  <li id="5">5</li>
  <li id="6">6</li>
  </ul>
  <input type="button" name="Check" value=" Check " onclick="messageWrite()" /> 
  

</body>
</html>


Проблема в том что в каждsй из горизонтальных списков визуально входят 3 элемента, но физически и 4-ый элемент туда заходит и висит визуально некрасиво непонятно где. Мне хотелось что б нельзя было в список запыхнуть 4-ый элемент, если 3 там уже есть.
Ответить с цитированием
  #10 (permalink)  
Старый 30.03.2013, 21:01
Аватар для zilker
Профессор
Отправить личное сообщение для zilker Посмотреть профиль Найти все сообщения от zilker
 
Регистрация: 30.07.2011
Сообщений: 189

Есть функция beforeStop, которая вызовется перед окончанием перетаскивания, и есть метод cancel, который отменяет сортировку. Исходя из этого имеем:
beforeStop: function( event, ui ) {
    if (#количество элементов 3#) {
        $( ".connectedSortable" ).sortable( "cancel" );
    }
}

И по поводу document.writeln - перезапишет вам весь документ, используйте console или alert для отладки.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как получить Draggable и в то-же время Sortable элементы Munk Библиотеки/Тулкиты/Фреймворки 1 15.03.2012 13:00
jquery ui sortable + draggable giGnet jQuery 1 08.03.2011 19:37
Sortable, два связанных списка. Как один из них сделать неизменяемым? kvecxjo jQuery 1 30.03.2010 03:15
ui draggable + sortable satels jQuery 0 05.01.2010 11:28
UI: sortable x00xer jQuery 1 03.11.2009 15:51