【html】学习记录-拖放（drag and drop）

目的：实现拖动目标并放置到指定区域。

使元素可拖动，涉及到元素的全局属性draggable

<img draggable="true" />

 

即img元素设置为可拖动。

浏览HTML的Mouse事件属性,需要为img分配ondragstart属性，为div分配ondrop和ondragover属性。

首先需要确定拖动对象，即需要获取被drag元素的数据，这里用到dataTransfer对象的setData方法，设被调用方法名称为drag(ev)，则该方法定义如下：

function drag(ev){
  ev.dataTransfer.setData("Text",ev.target.id); 
}

 

当draggable数据被drop时，首先drop区域div要允许img被放在此处，这是要用ondragover属性调用一个function，用到方法preventDefault()，设function名为allowDrop(ev):

function allowDrop(ev){
  ev.preventDefault();
}

 

当被拖动元素被drop时，执行drop事件。用到body对象的appendChild方法(即“附加行为”)。用getData()获取“附加”到drop目的地的元素数据，传给ondrop()，此处的数据即先前由setData()获得的img元素数据。设方法为drop:

function drop(ev){
  var data=ev.dataTransfer.getData("Text");
  ev.target.appendChild(document.getElementById(data));
  ev.preventDefault();
  alert("233");
}

 

1.dataTransfer对象的getData方法，获取img数据

2.target对象的appendChild方法，附加新获取的img数据到原div元素数据

3.document对象的getElementById方法，

 

完整代码：

<p>move the picture to the div</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" ></div>

<img id="drag1" src="http://www.gbtags.com/gb/laitu/100x100&text=GBtags/efb73e/FFFFFF" draggable="true" ondragstart="drag(event)"></img>

<style type="text/css">
    div
        {   width:100px;
            height:100px;
            padding:10px;
            border:1px solid #CCC;}
        </style>

<script>function drag(ev){
    ev.dataTransfer.setData("Text",ev.target.id);
}

function allowDrop(ev){
    ev.preventDefault();
}

function drop(ev){
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
    ev.preventDefault();
    alert('Move Successfully!');
}</script>

 

资料：http://www.jb51.net/shouce/dhtml/objects/DD.html