html - 拖放文字

标签 html drag-and-drop

我如何修改下一个代码来拖放单词?
这样当我选择句子中的一个词时,我可以拖动

http://jsbin.com/ejenub/1/edit

 <!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
#div2 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)

{

ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
verbs
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
adjetives
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<div id="drag1" draggable="true" ondragstart="drag(event)">I play the guitar</div>
<div id="drag2" draggable="true" ondragstart="drag(event)">The piano is black</div
</body>
</html>

最佳答案

所有单词都应该包含在 span 或其他节点中,这里是不修改源 html 的工作示例;)http://jsbin.com/ejenub/3

关于html - 拖放文字,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14187537/

相关文章:

html - 如何防止它在 html 中换行?

javascript - 检查表单中的每个元素是否已填充 JQUERY

javascript - 出于某种原因,Javascript 甚至在我的 HTML/CSS 页面加载之前加载

javascript - HTML5 拖放

angularjs - 在 Angular 中使用 cdkDropListData 时出错,无法绑定(bind)到 'cdkDropListData',因为它不是 'div' 的已知属性

drag-and-drop - 在 javafx 中使用显示快照拖放 vbox 元素

html - 使用 Javascript 水平滚动时的页面大小校正

html - 为什么 CSS head 样式不适用于 Bootstrap HTML 文件

android - 图像拖放

javascript - 如何检测用户何时将图像放入浏览器当前选项卡视口(viewport)中?