@rusgayfer

Как сделать перемещение объекта по изображению (draggable)?

Код работает, перемещается, но не работает с jquery вот с эти файлом. Использую админку от adminlte

<script src="https://adminlte.io/themes/AdminLTE/bower_components/jquery/dist/jquery.min.js"></script>


Когда его убираю все работает, но на сайте плагины перестают работать без него (например меню не открывается и т д). В чем проблема почему он блокирует? И как сделать чтобы за границы не перетаскивался? Помогите поожалуйста, все файлы пробывал закрывать и за этого только не работает((

<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>	
	
		<script type="text/javascript">
$(document).ready(function() {

   $("#tabs").tabs();
//Код первой вкладки (стандартное использование)
   $("#drag1").draggable();
//Код второй вкладки (события)
   var x=0,y=0,z=0;
   $("#drag2").draggable({
      start:function(){
         ++x;
         $("#start").html(x);
      },
      stop:function(){
         ++y;
         $("#stop").html(y);},
      drag:function(){
         ++z;
         $("#drag").html(z);}
      });
//Код третьей вкладки (ограничения)
   $("#drag3").draggable();
   $("#drag4").draggable();
   $("#drag5").draggable();
//Код четвертой вкладки (стиль курсора)
   $("#drag7").draggable();
   $("#drag8").draggable();
//Код пятой вкладки (возвращение)
   $("#drag9").draggable();
   $("#drag10").draggable();
//Код шестой вкладки (прилипание)
   $("#drag11").draggable();
   $("#drag12").draggable();

});
</script>


<style type="text/css">
#drag5
{
width:300px;
height:100px;
margin:0px;
}

#wrapall
{
border:1px solid;
width:700px;
height:200px;
padding:0px;
background-image: url(https://www.firestock.ru/wp-content/uploads/2014/07/sequence-01-still0023-700x393.jpg);
}

</style>


<div id="wrapall">
<div id="drag5"><center><img src="https://vk.com/images/camera_100.png"style="width: 50px; border-radius: 50%;"><p style="color: #fff !important;">Имя Фамилия</p></center></div>
</div>
<br>

<script src="https://adminlte.io/themes/AdminLTE/bower_components/jquery/dist/jquery.min.js"></script>


Онлайн редактор: http://xhtml.ru/instr/html_editor
  • Вопрос задан
  • 229 просмотров
Решения вопроса 1
Exploding
@Exploding
wtf?
Уапэрвих. Как сказали - сама библиотека подключена два раза.
2. Я не знаю что там у Вас за админка такая но возможно стоит подключить более свежую версию jquery, а не 1.5?
3. Зачем столько раз плагин то инициировать на каждом элементе? Задайте им один класс и инициируйте по классу вызвав метод один раз, а не 12.
Вот так $(".my-little-funny-drag").draggable();

А по плагину draggable инфу на офф сайте же можно взять jqueryui.com/draggable
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы