拖拽文字赋值

<!DOCTYPE html>
<head>
	<meta charset="utf-8" />
	<title>handlebars</title>
	<script src="jquery.js"></script>
	<style>
		p{color:#f00;}
		.div{
			width: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');
    }
   }
  }

posted on 2017-12-20 17:06 jessie912 阅读(218) 评论(0) 编辑收藏举报