Jquery可拖动不起作用2 [关闭]答案

【问题标题】：Jquery draggable not working 2 [closed]Jquery可拖动不起作用2 [关闭]
【发布时间】：2016-05-27 15:21:23
【问题描述】：

所以我正在尝试使用 jquery 制作一个可拖动的元素，但它在这里不起作用是代码

<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>

【问题讨论】：

标签： javascript jquery html css jquery-ui

【解决方案1】：

您需要element 才能拖动。没有任何带有 id draggable 的此类元素，您已经为其实例化了 dragging。我假设您想将div 与id console 一起拖动，因此您需要在$( "#console" ).draggable(); 等特定元素上初始化draggable。下面是工作的sn-p

$(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>

【讨论】：

【解决方案2】：

函数写入#draggable，但未定义此id。

这是带有示例的工作代码

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/

【讨论】：

【解决方案3】：

两件事：

您的 html 中没有任何 id 定义为可拖动
您的#content 中没有内容可以让背景显示为黑色。

尝试类似的方法，并为您的控制台设置一些高度，例如 100 像素。你应该看到可拖动的效果

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

 </div>
</div>

【讨论】：

【解决方案4】：

您将 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>

【讨论】：

【解决方案5】：

Draggable 需要一个元素..您的代码中没有 id 为可拖动的元素..

试试这个代码：

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();
         });

【讨论】：