drag & drop 拖拽與拖放簡介


  1. DataTransfer 對象:退拽對象用來傳遞的媒介,使用一般為Event.dataTransfer。

  2. draggable 屬性:就是標簽元素要設置draggable=true,否則不會有效果

,例如:

<div title="拖拽我" draggable="true">列表1</div>
  1. ondragstart 事件:當拖拽元素開始被拖拽的時候觸發的事件,此事件作用在被拖曳元素上
  2. ondragenter 事件:當拖曳元素進入目標元素的時候觸發的事件,此事件作用在目標元素上
  3. ondragover 事件:拖拽元素在目標元素上移動的時候觸發的事件,此事件作用在目標元素上
  4. ondrop 事件:被拖拽的元素在目標元素上同時鼠標放開觸發的事件,此事件作用在目標元素上
  5. ondragend 事件:當拖拽完成后觸發的事件,此事件作用在被拖曳元素上
  6. Event.preventDefault() 方法:阻止默認的些事件方法等執行。在ondragover中一定要執行
  7. preventDefault(),否則ondrop事件不會被觸發。另外,如果是從其他應用軟件或是文件中拖東西進來,尤其是圖片的時候,默認的動作是顯示這個圖片或是相關信息,並不是真的執行drop。此時需要用用document的ondragover事件把它直接干掉。
  8. Event.effectAllowed 屬性:就是拖拽的效果。

下面是一個拖放外部程序圖片的實例:

html代碼:

<form id="frm">
<fieldset>
<legend>用拖動的方式選擇文件:</legend>
<ul id="upload" ondrop="dropFile(event)" ondragenter="return false;" ondragover="return false;" ></ul>
</fieldset>
</form>

js代碼:

<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
function loadFun(file){
return function(e){
var str=document.createElement('span');
str.innerHTML=['<img src="',e.target.result,'" title="',file.name,'"/>'].join('');
$('upload').insertBefore(str,null);
}
};

function uploadFile(f){
if(typeof FileReader=='undefined')
{
alert('瀏覽器不支持 FileReader對象')
return false;
}
for(var i=0;i<f.length;i++){
var reader=new FileReader();
reader.readAsDataURL(f[i]);
reader.onload=loadFun(f[i]);
}

}

function dropFile(e){
uploadFile(e.dataTransfer.files);
e.stopPropagation();
e.preventDefault();
}

</script>

效果如下圖:
這里寫圖片描述


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
  © 2014-2022 ITdaan.com 联系我们: