Implementation method of Html5 drag and drop

今天写一下html5的拖放问题。

 设置元素可以拖放

     设置元素可以拖放用draggable属性，设置为true。元素就可以拖放了。（注：火狐浏览器不支持）

 拖拽元素事件

    ondragstart：拖拽前触发

          ondrag：拖拽中连续触发

     ondragend：拖拽结束触发

 目标元素事件

    ondragenter：移入目标元素时触发

     ondragover：移入目标元素后连续触发

    ondragleave：离开目标元素触发

           ondrop：在目标元素释放鼠标触发

 

 事件的执行顺序

    1、drop不触发的时候

               dragstart>drag>dragenter>dragover>dragleave>dragend

   2、drop触发的时候（dragover的时候阻止默认事件）

              dragstart>drag>dragenter>dragover>drop>dragend

 解决火狐下的问题

   必须设置 dataTransfer对象才可以拖拽图片外的其他标签

     setData（）：设置数据key和value（必须是字符串）

     getData（）：获取数据，根据key值，获取相应的value

    offctAllowed：设置光标样式

 setDragImage：设置拖拽样式，三个参数：指定的元素、坐标X、坐标y

拖拽元素事件具体代码：

##oDiv.ondragstart = function (){console.log('Triggered when dragging starts')oDiv.style.background = 'green';}//Turns to red after dragging oDiv.ondragend = function(){ console.log('Drag ends trigger');oDiv. style.background = 'red'}oDiv.ondrag = function(){console.log('Continuously triggered when dragging') ;}

目标元素事件具体代码：

    

	charset="UTF-8">
	div{
	width: 200px;
	height: 200px;
	background: red;
	}
	draggable="true">
	##
##//Get Element
var oDiv = document.querySelector('div');
//The element turns green when you start dragging
< ;/html>

##oDiv2.ondragenter = function(){console.log('Moving into the target element triggers')oDiv2.style.borderColor = 'blue'##}oDiv2.ondragleave = function(){console .log('Triggered by removing target element')oDiv2.style.borderColor = 'black'}##oDiv2.ondragover = function(ev ){console.log('Triggered continuously after moving into the target element');var event = window.event || ev;/ /Prevent default eventevent.preventDefault()} //To trigger the ondrop event, the default event must be blocked in the ondragover event oDiv2.ondrop = function(){console.log('Triggered by releasing the drag-and-drop element in the target element')oDiv2.appendChild(oDiv1)}##

charset="UTF-8">

#div1{

width: 100px;

height: 100px;

background: red;

}

#div2{

width: 200px;

height: 200px;

border: solid 1px;

}

id="div1" draggable="true">

id="div2">

##

#//Get the element

var oDiv1 = document.querySelector("#div1");

var oDiv2 = document.querySelector("#div2");

//Target element event

解决火狐浏览器的拖放问题具体代码：

##var aLi = document.querySelectorAll("li ");//Target element eventvar oDiv = document.querySelector ("div");//Drag and drop element event// Solve the drag-and-drop problem in Firefox: Set the setData() method when starting drag-and-drop for(var i=0;i##var event = window.event || ev;event.dataTransfer.setData('test',this.index+1)//Set cursor style event.dataTransfer.effectAllowed = 'uninitialized ';//Set drag styleevent.dataTransfer.setDragImage(oDiv,100,100)}}oDiv.ondragover = function(ev){var event = window.event || ev;event.preventDefault();}//Pop-up box when releasing the elementoDiv.ondrop = function(ev){ var event = window.event || ev;var value = event.dataTransfer.getData('test','Zhang San')alert(value)}## ##

	charset="UTF-8">
	li{
	list-style: none;
	width: 100px;
	height: 40px;
	margin-top: 10px;
	background: orange;
	}
	div{
	width: 200px;
	height: 200px;
	background: red;
	margin: 0 auto;
	}
	draggable="true">1
	draggable="true">2
	draggable="true">3
##//Add attributes and store subscripts
aLi[i].index = i;
aLi[i].ondragstart = function(ev){

The above is the detailed content of Implementation method of Html5 drag and drop. For more information, please follow other related articles on the PHP Chinese website!