Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   drag and drop (каталог) (https://javascript.ru/forum/misc/41223-drag-drop-katalog.html)

niko42 04.09.2013 18:18

drag and drop (каталог)
 
Здравсвуйте!

Есть много блоков (кртинки)
<div style="displya:inline-block;">
  <img>
</div>
<div style="displya:inline-block;">
  <img>
</div>
<div style="displya:inline-block;">
  <img>
</div>
<div style="displya:inline-block;">
  <img>
</div>


Суть такова: хочу изменить месторасположение элемента и отправлять запрос в БД, где будет этот элемента распологаться.

Уточните, пожалуйста, чем можно воспользоваться для реализациюю даного решения. Или посоветуйте уже готовые варианты.

BETEPAH 04.09.2013 18:32

Цитата:

Сообщение от niko42
хочу изменить месторасположение элемента и отправлять запрос в БД, где будет этот элемента распологаться.
Уточните, пожалуйста, чем можно воспользоваться для реализациюю даного решения. Или посоветуйте уже готовые варианты.

notepad++ - для изменения месторасположения;
gmail.com - для отправки запроса

jsru_ 04.09.2013 18:34

http://jqueryui.com/droppable/

niko42 04.09.2013 18:52

Спасибо, то что нужно http://jqueryui.com/sortable/

niko42 04.09.2013 22:24

Есть функция sortable() в библиотеки jquery ui. Кагда я перемещаю объект и установил его на нужно место, как получить потом эти объекты попорядку?

рони 04.09.2013 22:38

Цитата:

Сообщение от niko42
Есть функция sortable() в библиотеки jquery ui. Кагда я перемещаю объект и установил его на нужно место, как получить потом эти объекты попорядку?

а что мешает то взять нужные элементы?

niko42 04.09.2013 22:46

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

рони 04.09.2013 22:59

Цитата:

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

непонимаю
вопрос вам новый порядок нужен или старый ?

niko42 04.09.2013 23:02

Новый порядок в том положение в каторрм он есть по фатку изменения

рони 04.09.2013 23:05

niko42,
:write:
<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>jQuery UI Sortable - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <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>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>

  #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }

  #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }

  #sortable li span { position: absolute; margin-left: -1.3em; }

  </style>
  <script>

  $(function () {
      $("#sortable")
          .sortable({
              stop: function (event, ui) {
                  var texts = [];
                  $("#sortable li")
                      .each(function (indx, element) {
                          texts.push($(element)
                              .text() + " ");
                      });
                  $(".out")
                      .html(texts)
              }
          });
      $("#sortable")
          .disableSelection();
  });
  </script>
</head>

<body>
  <div class="out">
    Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7
  </div>

  <ul id="sortable">
    <li class="ui-state-default">Item 1</li>

    <li class="ui-state-default">Item 2</li>

    <li class="ui-state-default">Item 3</li>

    <li class="ui-state-default">Item 4</li>

    <li class="ui-state-default">Item 5</li>

    <li class="ui-state-default">Item 6</li>

    <li class="ui-state-default">Item 7</li>
  </ul>
</body>
</html>

danik.js 05.09.2013 02:59

Цитата:

Сообщение от niko42
displya:inline-block

Пляя...:cray:

BETEPAH 05.09.2013 08:50

Цитата:

Сообщение от danik.js (Сообщение 270924)
Пляя...:cray:

Достал, видимо, скрипт человека :help:

niko42 05.09.2013 08:56

Большое Вам спасибо!!! К сожалению не знаю английский по этому трудности с прочтение документации!

niko42 05.09.2013 09:04

Цитата:

Сообщение от danik.js (Сообщение 270924)
Пляя...:cray:

Ну конечно можно это сделать по другому.
<style>
#list_product li {
	display: inline-block;
}
</style>
<ul id="list_product">
	<li><img></li>
	<li><img></li>
	<li><img></li>
	<li><img></li>
</ul>


Часовой пояс GMT +3, время: 11:30.