Тема: Draggable help
Показать сообщение отдельно
  #4 (permalink)  
Старый 16.02.2014, 13:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

xTODx,
аяксом отправляйте текущий порядок когда надоест сортировать ... и так вариант ... из первого блока берём сколько хотим ... во втором сортируем ... в третем отображается текущее состояние сортировки, можно использовать для отправки на сервер ... если во втором блоке что-то лишнее смело бросаем ненужный блок в корзину для мусора...
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>demo</title>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <style type='text/css'>
  body{font:0.8em Arial,sans-serif}
  h1{font-size:1.2em;text-align:center}
  .wrapper{margin:20px auto}
  #block1,#block2,.out{border:solid 1px #555555;margin:10px;padding:20px;-moz-border-radius:5px;-webkit-border-radius:5px;float:left;min-width:100px}
  .textBlock{border:solid 1px #333333;font-weight:bold;margin:10px 0 5px 0;padding:10px;text-align:center;background:#eee;-moz-border-radius:3px;-webkit-border-radius:3px}
  .dropHere{background:#e7e7de}
  .table_drop{width:400px;height:}
  </style>
<script type='text/javascript'>
$(window).load(function () {
    $("#block1 .textBlock").draggable({
        helper: "clone",
        connectToSortable: "#block2"
    });
    $("#block2").sortable({
        stop: verify
    });

    function verify() {
        var texts = [];
        $("#block2 .textBlock").each(function (indx, element) {
            texts.push($(element).text() + " ")
        });
        $(".out").html(texts)
    }
    $("#trash").droppable({
        accept: "#block2 .textBlock",
        drop: function (event, ui) {
            ui.draggable.hide("slow", function () {
                $(this).remove();
                verify()
            })
        }
    })
});
</script>
</head>
<body>
      <div class="wrapper">
        <div id="block1" class="bla connectedSortable">
            <div class="textBlock ui-state-default">Блок 1</div>
            <div class="textBlock ui-state-default">Блок 2</div>
            <div class="textBlock ui-state-default">Блок 3</div>
			<div class="textBlock ui-state-default">Блок 4</div>
            <div class="textBlock ui-state-default">Блок 5</div>
            <div class="textBlock ui-state-default">Блок 6</div>
        </div>
		<div id="block2" class="bla"></div>
        <div class="out"></div>
     </div>
     <img src="http://www.specodegdaopt.ru/data/medium/korzina_dlya_musora_plats..jpg" alt="" id="trash" width="100" height="120">
</body>
</html>

Последний раз редактировалось рони, 16.02.2014 в 13:39.
Ответить с цитированием