jquery里,把一段文字“拖拽”到DIV里的特效亲测

文章标签: 拖拽
  • :
  • 03-17 13:29
  • :
  • 18次
  • :
  • 0条
  • 0赞

简介jquery里和HTML5里的拖拽相关的一个实例,把一段文字拖放到指定的DIV里的效果,及在线实例演示。

本文站长和大家分享一个jquery做的一个“拖拽”相关的实例,把一段文本播放到一个DIV窗器里:

假设我们有这样一段HTML:

<div id="drop" class="w-75 mx-auto">
  
</div>
<p id="drag" draggable="true" class="mt-2">可拖拽,请把该段落拖入上面的DIV里。</p>

drop是容器,drag是要拖拽的对象,下面是具体的实现拖拽效果的jquery代码:

<script language="javascript">
$("#drag").on("dragstart",function(e){
	e.originalEvent.dataTransfer.setData("Text",e.target.id);
});
$("#drop")
.on("dragover",function(e){
	//这一句必须加,不加drop事件激发不了
	e.preventDefault();
})
.on("drop",function(e){
	var data=e.originalEvent.dataTransfer.getData("Text");
	$(e.target).append($("#"+data));
	e.preventDefault();	
});
</script>
//原创: 爱jQuery www.aijquery.cn

这里是在线演示:jquery拖拽—把一段文本拖放到DIV里 在线演示

和“拖拽”相关的内容,如果你想学习和了解更多,可以看这里:jquery 拖拽



您正在找的文章可能是: