Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.08.2013, 10:20
Аватар для Capoocha
Новичок на форуме
Отправить личное сообщение для Capoocha Посмотреть профиль Найти все сообщения от Capoocha
 
Регистрация: 05.08.2013
Сообщений: 2

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

Пример тут

Заранее большое спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 30.08.2013, 10:37
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,123

Сообщение от Capoocha Посмотреть сообщение
Перетаскиваю элементы из одного контейнера в другой (из "parts" в "canvas")
Пример тут
Что-то там ничего не таскается...
Ответить с цитированием
  #3 (permalink)  
Старый 30.08.2013, 10:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

Сообщение от 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>
Ответить с цитированием
  #4 (permalink)  
Старый 30.08.2013, 11:33
Аватар для Capoocha
Новичок на форуме
Отправить личное сообщение для Capoocha Посмотреть профиль Найти все сообщения от Capoocha
 
Регистрация: 05.08.2013
Сообщений: 2

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



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
плагин jquery ajax upload Karabella jQuery 0 06.06.2013 21:25
Как сделать плагин jQuery в виде объекта? SkaN jQuery 12 28.06.2012 12:31
Зацените плагин слайдер на jQuery w411 Ваши сайты и скрипты 11 03.10.2011 19:49
Плагин jQuery form. Добавляю форму js'ом Physicist jQuery 3 21.07.2011 17:46
syncTranslate jQuery плагин Snowcore Ваши сайты и скрипты 0 20.10.2009 19:00