拖放Html文本框問題

我已經嘗試不斷製作可拖動的文本框，並且文本框始終返回到它開始的位置。我希望文本框是可點擊和可拖動的，一旦它被刪除，它將保留。拖放Html文本框問題

這是我目前使用的代碼。需要幫忙！

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

你能幫幫我嗎？你可以將更正後的代碼發佈給我嗎？

來源

2013-05-15 CHASE

我更新了我的答案，更好的實現。 – adaam

甚至比jQuery的調整（），它的反射可能是不完全合適，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/ - 預覽那裏。

來源

2013-05-15 23:55:44 adaam

拖放Html文本框問題

回答

相關問題