Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   jQuery UI плагин Draggable (https://javascript.ru/forum/jquery/41065-jquery-ui-plagin-draggable.html)

Capoocha 30.08.2013 10:20

jQuery UI плагин Draggable
 
Здравствуйте! Работаю с плагином Draggable. Перетаскиваю элементы из одного контейнера в другой (из "parts" в "canvas"), при этом в контейнере "canvas" перетаскиваемый элемент прилипает к элементам, которые там находятся.
Вопрос: как можно узнать id элемента, к которому "прилип" перетаскиваемый элемент?

Пример тут

Заранее большое спасибо.

ksa 30.08.2013 10:37

Цитата:

Сообщение от Capoocha (Сообщение 270011)
Перетаскиваю элементы из одного контейнера в другой (из "parts" в "canvas")
Пример тут

Что-то там ничего не таскается... :cray:

рони 30.08.2013 10:50

Цитата:

Сообщение от Capoocha
jQuery('.draggable').draggable({
snap: '.inCanvas',
snapMode: 'inner',
});

запятая в конце обьекта до добра не доведёт
изучайте jQuery UI раз его используите ...
Цитата:

Сообщение от Capoocha
как можно узнать id элемента, к которому "прилип" перетаскиваемый элемент?

например вот так
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery UI Slider - Range slider</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
  <style type="text/css">
  	.canvas {
		position: absolute;
		left: 15px;
		background: #fff;
		margin: 0px;
		padding: 0px;
		width: 300px;
		height: 150px;
		border: 1px dashed #475E75;
	}

	.inCanvas {
		background: #fff;
		margin: 10px;
		padding: 0px;
		width: 150;
		height: 45px;
        border: 1px solid #000;
	}

	.parts {
		margin: 0px;
		padding: 0px;
		width: 300px;
		height: 360px;
        float: right;
	}
	#contacts, #date {
		margin: 0px 0px 5px 90px;
		padding: 5px;
		width: 150px;
        height: 35px;
		background: #fff;
		border: 1px dashed #000;
		text-align: center;
		cursor: move;
	}
  </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

  <script>
   $(function()
   		{

   				$('.draggable').draggable(
   						{
   						snap: '.inCanvas',
   						snapMode: 'inner'
   						}
   				);
   				$(".inCanvas").droppable(
   						{
   						drop: function(event, ui) {
   										alert($(this).attr("id"))
   								}
   						}
   				);

   		}
   )
  </script>
</head>

<body>
<div id="canvas" class="canvas">
    <div id="1" class="inCanvas"></div>
	<div id="2" class="inCanvas"></div>
</div>
<div class="parts">
    <div id="contacts" class="draggable">
	    <p>Контакты</p>
	</div>
	<div id="date" class="draggable">
        <p>Дата выдачи талона</p>
    </div>
</div>
</body>
</html>

Capoocha 30.08.2013 11:33

Цитата:

изучайте jQuery UI раз его используите ...
я его как раз и изучаю. Всё искала решение методами Draggable. Теперь буду мыслить шире. :) Спасибо Вам!


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