Question

我一直尝试制作一个可拖动的文本框，文本框始终返回到它开始的位置。我希望文本框可以点击和拖动，一旦它被删除它就会停留。

这是我目前使用的代码。需要帮助！

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#boxA{
float:left;padding:10px;margin:10px; -moz-user-select:none;
}
   #boxA { background-color: #6633FF; width:75px; height:75px;  }
</style>
<script type="text/javascript">
function dragStart(ev) {
   ev.dataTransfer.effectAllowed='move';
   ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
   ev.dataTransfer.setDragImage(ev.target,0,0);
   return false;
}
</script>
</head>
<body>
<center>
<div id="boxA" draggable="true" 
        ondragstart="return dragStart(event)">
   <p>Test</p>
</div>
</center>
</body>
</html>

你可以帮帮我吗？你能把更正后的代码发给我吗？

Answer 1

甚至比jQuery resize（）更好，反射可能并不完全合适，jQuery UI在他们的网站上有一个可拖动的文本框示例：

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Draggable - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <style>
  #draggable { width: 150px; height: 150px; padding: 0.5em; }
  </style>
  <script>
  $(function() {
    $( "#draggable" ).draggable();
  });
  </script>
</head>
<body>

<div id="draggable" class="ui-widget-content">
  <p>Drag me around</p>
</div>


</body>
</html>

http://jqueryui.com/draggable/ - 在那里预览。

拖放Html文本框问题

1 个答案: