2016-05-27 2 views
-1

Так что я пытаюсь сделать элемент перемещаемого с JQuery, но это не работает здесь кодJquery перетаскиваемые не работают 2

<html> 
    <head> 
     <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
     <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
     <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
    <style> 
     #console { 
      background-color: #000000; 
     } 
    </style> 
    </head> 
    <body> 
     <div id="console"> 

     </div> 
     <script> 
      $(function() { 
       $("#draggable").draggable(); 
     }); 
     </script> 
    </body> 
</html> 

ответ

1

вам нужно element перетащить. Нет такого элемента с iddraggable, для которого вы создали экземпляр dragging. Я предполагаю, что вы хотите перетащить div с idconsole и, следовательно, вам нужно инициализировать draggable на этом конкретном элементе, например $("#console").draggable();. Ниже в рабочий фрагмент

$(function() { 
 
    $("#console").draggable(); 
 
});
#console { 
 
    background-color: #000000; 
 
    width: 300px; 
 
    height: 300px; 
 
}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
<script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 

 
<div id="console"> 
 
</div>

0

Функция записывается #draggable, но этот идентификатор не определен.

Вот рабочий код с примером

HTML

<div id="console" class="draggable"> 

</div> 

CSS

#console { 
    background-color: #000000; 
    width:100px; 
    height:100px; 
} 

JS

$(function() { 
    $(".draggable").draggable(); 
}); 

Выше я использую перемещаемой класс, потому что вы уже используете консоль, если в DIV вы можете изменить его соответствующим образом

Пример: https://jsfiddle.net/fn12kq4o/1/

0

Две вещи:

  1. Вы надеваете 't есть какой-либо идентификатор, определенный как перетаскиваемый в вашем html
  2. У вас нет контента в #content для th фон, чтобы показать в черном.

Попробуйте что-нибудь наподобие и дайте немного высоты своей консоли, скажем, 100px. Вы должны увидеть эффект перетаскиваемого

<div id="draggable"> 
<div id="console"> 

</div> 
</div> 
0

вашего набор dreggable к «#draggable» элементы, но нет ни одного такого элемента в HTML. поэтому я изменил #draggable к #console

<html> 
 
<head> 
 
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
<style> 
 
#console { 
 
background-color: #000000; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<div id="console" style="width:20%;height:50px;"> 
 

 
</div> 
 
     <script> 
 
    $(function() { 
 
    $("#console").draggable(); 
 
    }); 
 
    </script> 
 
</body> 
 
</html>

0

Draggable нужен элемент ..There не является элемент с идентификатором перетаскиваемом в Вашем коде ..

Попробуйте этот код:

Html:

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet"href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
<script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 

</head> 
<body> 
<div id="draggable"></div> 
</body> 
</html> 

CSS:

#draggable { 
background-color: #000000; 
height:300px; 
width:300px; 
} 

JS:

$(function() { 
       $("#draggable").draggable(); 
     });