<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>handlebars</title>
<script src="jquery.js"></script>
<style>
p{color:#f00;}
.div{
600px;
height:100px;
border:1px solid #e5e5e5;
}
span{cursor: pointer;}
</style>
</head>
<body>
<div class="box">
<p>分词结果如下（拖拽词语到输入框）</p>
<span id="drag1" draggable="true" ondragstart="drag(event)">三枪</span>
<span id="drag2" draggable="true" ondragstart="drag(event)">男士</span>
<span id="drag3" draggable="true" ondragstart="drag(event)">背心</span>
<span id="drag4" draggable="true" ondragstart="drag(event)">纯棉</span>
<span id="drag5" draggable="true" ondragstart="drag(event)">李晨</span>
<span id="drag6" draggable="true" ondragstart="drag(event)">同款</span>
</div>
<div >
<p>添加必加词(单机移除)</p>
<div id="addWord" class="div" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
<div>
<p>添加排除词(单机移除)</p>
<div id="removeWord" class="div" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
<script>
function allowDrop(ev) {
ev.preventDefault(); //取消默认行为
}
function drag(ev) {
// 通过dataTransfer对象,存储源元素的关键数据
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var addWord=document.getElementById("addWord");
var removeWord=document.getElementById("removeWord");
// 通过dataTransfer对象,使用源元素的关键数据
var data = ev.dataTransfer.getData("text");
var dataCt=document.getElementById(data).innerHTML;
var targetCt=ev.target.innerHTML;
if(addWord.innerHTML.indexOf(dataCt)<0&&removeWord.innerHTML.indexOf(dataCt)<0){
ev.target.innerHTML+='<span onclick=reduction(this)>'+dataCt+'</span> ';
if(addWord.innerHTML.indexOf(dataCt)>=0){
document.getElementById(data).style.color="#ddd";
}
if(removeWord.innerHTML.indexOf(dataCt)>=0){
document.getElementById(data).style.color="blue";
}
}
}
function reduction(obj){
$(obj).remove();
var ct=$(obj).html();
var num =$(".box").children("span");
for(var i=0;i<num.length;i++){
if(num[i].innerHTML==ct){
num[i].style.color="black";
}
}
}
</script>
</body>
</html>
简单案例
<html>
<head>
<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.value+=(document.getElementById("drag1").innerHTML);
}
</script>
</head>
<body>
<input type='text' ondrop="drop(event)" ondragover="allowDrop(event)"></input>
<br>
<span id="drag1" draggable="true" ondragstart="drag(event)" >测试</span>
</body>
</html>
更新
function drop(ev) { ev.preventDefault(); var addWord=document.getElementById("addWord").getElementsByTagName("span"); var addArr=[]; for (var i = 0, length = addWord.length; i < length; i++) { addArr.push(addWord[i].innerHTML); } var removeWord=document.getElementById("removeWord").getElementsByTagName("span"); var removeArr=[]; for (var i = 0, length = removeWord.length; i < length; i++) { removeArr.push(removeWord[i].innerHTML); } var tatalArr=addArr.concat(removeArr); // 通过dataTransfer对象,使用源元素的关键数据 var data = ev.dataTransfer.getData("text"); var dataCt=document.getElementById(data).innerHTML; if(tatalArr==0){ ev.target.innerHTML+='<span onclick=reduction(this)>'+dataCt+'</span> '; if(document.getElementById("addWord").innerHTML.indexOf(dataCt)>=0){ document.getElementById(data).setAttribute('class', 'necessary'); } if(document.getElementById("removeWord").innerHTML.indexOf(dataCt)>=0){ document.getElementById(data).setAttribute('class', 'exclusion'); } }else{ for(var i=0,length=tatalArr.length;i<length;i++){ if(dataCt==tatalArr[i]){ return false; } } ev.target.innerHTML+='<span onclick=reduction(this)>'+dataCt+'</span> '; if(document.getElementById("addWord").innerHTML.indexOf(dataCt)>=0){ document.getElementById(data).setAttribute('class', 'necessary'); } if(document.getElementById("removeWord").innerHTML.indexOf(dataCt)>=0){ document.getElementById(data).setAttribute('class', 'exclusion'); } } }