Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.02.2014, 02:18
Профессор
Отправить личное сообщение для xTODx Посмотреть профиль Найти все сообщения от xTODx
 
Регистрация: 04.02.2014
Сообщений: 167

Draggable help
Всем привет. В общем не представляю как сделать такую вот вещь, знаю что в jQuery перетаскиваемые объекты можно сделать через Draggable().
Но в чём суть то.
Изначально обьектты появляются в одной колонке, нужные перетаскиваем во вторую, так же важен порядок. Как это сделать? тут не только Draggable наверное, так? Sortables ещё?? как всё это реализовать?
Ответить с цитированием
  #2 (permalink)  
Старый 16.02.2014, 03:21
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

xTODx,
начните с макета
Ответить с цитированием
  #3 (permalink)  
Старый 16.02.2014, 11:19
Профессор
Отправить личное сообщение для xTODx Посмотреть профиль Найти все сообщения от xTODx
 
Регистрация: 04.02.2014
Сообщений: 167

начало с макета есть.
Макет конечно набрасал, только вот такие вопросы:
1) как передать это потом в php, то есть то что мы поставили в #sortable
нужно записать в базу данных, при нажатии кнопки, ладно, всё бы ничего. НО, куда записать позиции и как?
и как это всё вообще связать с php?
что бы данные с каждого объекта которые я перетащил в поле, использовались в php.
Нужно что ли скрытые input cоздать? и в них уже записывать позиции, и данные об элементе? но всё же, как их потом достать в php в нужном порядке, и как определить где закончился один блок, а где начался второй...


<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <script src="http://code.jquery.com/jquery-latest.js"></script>
 <script src="/js/jquery-ui-1.9.2.custom.js"></script>
  <link type="text/css" href="css/custom-theme/jquery-ui-1.9.2.custom.css" rel="stylesheet" />
  <style>
    body{padding:15px;}
	
	ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
	li { margin: 5px; padding: 5px; width: 150px; }
	#sortable{ min-height: 200px;
				width:250px;
				background: #e6e6e6 url(/css/custom-theme/images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;}
	
  </style>
 <script>
	$(function() {
		$( "#accordion" ).accordion({
			header: " > div > h3 > input"
		});
		$( "#sortable" ).sortable({
			revert: true
		});
		$( "#draggable li" ).draggable({
			connectToSortable: "#sortable",
			helper: "clone",
			revert: "invalid"
		});
		$( "ul, li" ).disableSelection();
	});
	</script>
</head>
<body>
<ul id="draggable">
	<li id='aaccordion' class="ui-state-default">
    <h3>Section 1</h3>
	<div>
		<input type="text" name="name"/>
	</div></li>
	<li id='aaccordion' class="ui-state-default"><h3>Section 1</h3>
	<div>
		<input type="text" name="name2"/>
	</div></li></li>
</ul>
<form method="post">
<ul id="sortable">
	<li id='aaccordion' class="ui-state-default">Уже готовый модуль</li>
</ul>
<input type="submit" name="go" value='Go'/>
</form>
<?php 
if(isset($_POST['go'])){
	echo $_POST['name'];
	}
?>
</body>
</html>

2) Вот поставил я объект в #sortable. Но он мне стал не нужен, как сделать что бы его можно было удалить, то есть вывожу я его за пределы поля, и он удаляется, либо просто возвращается на своё место, с колонки выбора. Пример - когда беру #draggbatle li, и отпускаю его за пределами поля, он возвращается туда, где я его взял.
но он стал дочерним в #sortable, а значит нужно что бы при нажатии на обьект, он становился дочерним для #draggbatle. Верно?? но как?
3) попытался aaccordion ещё поставить, но не работает если его на <li> ставлю
в чём проблема может бытЬ? правильно отстроить нужно?

Последний раз редактировалось xTODx, 16.02.2014 в 11:50.
Ответить с цитированием
  #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.
Ответить с цитированием
  #5 (permalink)  
Старый 16.02.2014, 23:46
Профессор
Отправить личное сообщение для xTODx Посмотреть профиль Найти все сообщения от xTODx
 
Регистрация: 04.02.2014
Сообщений: 167

Спасибо, метод с удалением работает, однако остаётся место от блока, и в коде отображает этот элемент(хотя он и пустой).
Так же не понял как достать порядок. и информацию с каждого из блоков??
лично я думаю что то типа такого, сделать массив $inf['num']['inf']
где num - порядок этого элемента, инф - имя поля с информацией.
Ответить с цитированием
  #6 (permalink)  
Старый 16.02.2014, 23:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

Сообщение от xTODx
однако остаётся место от блока, и в коде отображает этот элемент(хотя он и пустой).
непонял да и остальное тоже.
Ответить с цитированием
  #7 (permalink)  
Старый 17.02.2014, 00:31
Профессор
Отправить личное сообщение для xTODx Посмотреть профиль Найти все сообщения от xTODx
 
Регистрация: 04.02.2014
Сообщений: 167

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <script src="http://code.jquery.com/jquery-latest.js"></script>
 <script src="/js/jquery-ui-1.9.2.custom.js"></script>
  <link type="text/css" href="css/custom-theme/jquery-ui-1.9.2.custom.css" rel="stylesheet" />
  <style>
    body{padding:15px;}
	
	ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
	li { margin: 5px; padding: 5px; width: 150px; }
	#sortable{ min-height: 200px;
				width:250px;
				background: #e6e6e6 url(/css/custom-theme/images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;}
	
  </style>
 <script>
	$(function() {
		$( "#accordion" ).accordion({
			header: " > div > h3 > input"
		});
		$( "#sortable" ).sortable({
			revert: true
		});
		$( "#draggable li" ).draggable({
			connectToSortable: "#sortable",
			helper: "clone",
			revert: "invalid"
		});
		$( "ul, li" ).disableSelection();
		$("#trash").droppable({
        accept: "#sortable li",
        drop: function (event, ui) {
            ui.draggable.hide("slow", function () {
                $(this).remove();
                verify()
            })
		function verify() {
        var texts = [];
        $("#sortable li").each(function (indx, element) {
            texts.push($(element).text() + " ")
        });
        $(".out").html(texts)
    }

        }
    })

	});
	</script>
</head>
<body>
<ul id="draggable">
	<li id='aaccordion' class="ui-state-default">
    <h3>Section 1</h3>
	<div>
		<input type="text" name="name"/>
	</div></li>
	<li id='aaccordion' class="ui-state-default"><h3>Section 1</h3>
	<div>
		<input type="text" name="name2"/>
	</div></li></li>
</ul>
<form method="post">
<ul id="sortable">
	<li id='aaccordion' class="ui-state-default">Уже готовый модуль</li>
</ul>
<input type="submit" name="go" value='Go'/>
</form>
 <img src="http://www.specodegdaopt.ru/data/medium/korzina_dlya_musora_plats..jpg" alt="" id="trash" width="100" height="120">
 
<?php 
if(isset($_POST['go'])){
	echo $_POST['name'];
	}
?>
</body>
</html>

вот код, что не то не так?
Ответить с цитированием
  #8 (permalink)  
Старый 17.02.2014, 00:33
Профессор
Отправить личное сообщение для xTODx Посмотреть профиль Найти все сообщения от xTODx
 
Регистрация: 04.02.2014
Сообщений: 167

в общем я перетаскиваю элемент в trash, он как бы пропадает из виду, но остаётся
<li class="ui-state-default ui-sortable-placeholder" style="visibility: hidden; height: 20px;"></li>

и всё-равно занимает место, как его убрать совсем.
Ответить с цитированием
  #9 (permalink)  
Старый 17.02.2014, 00:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

Сообщение от xTODx
вот код, что не то не так?
63 строка и можно без php?
Ответить с цитированием
  #10 (permalink)  
Старый 17.02.2014, 00:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

xTODx,
да и что это за ересь 55, 60, 67 -- id ???
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Draggable и скроллинг окна Telnet jQuery 0 26.04.2013 23:10
draggable и scrollbar wUI jQuery 4 24.01.2013 06:18
jquery ui sortable + draggable giGnet jQuery 1 08.03.2011 19:37
Странный баг UI draggable в Firefox и IE _deil_ jQuery 0 10.01.2010 19:49
ui draggable + sortable satels jQuery 0 05.01.2010 11:28