HTML 5ドラグケーブル
4290 ワード
ツールバーの draggableプロパティ:ラベル要素がdraggable=trueに設定されている場合、効果はありません.
≪イベント｜Events｜ldap≫
//引っ張られる要素に使う ondragstartイベント:ドラッグ要素がドラッグされ始めたときにトリガーされるイベントで、このイベントはドラッグ要素に作用する . drag:ドラッグされた要素はドラッグ中にトリガーされ続け、このイベントはドラッグされた要素に作用する ondragendイベント:ドラッグが完了するとトリガーされるイベントで、このイベントはドラッグされた要素に作用する //ターゲット要素に使用 ondragenterイベント:ドラッグ要素がターゲット要素に入るとトリガーされるイベントで、このイベントはターゲット要素に 作用します. ondragoverイベント:エレメントをドラッグしてターゲットエレメント上を移動するときにトリガーされるイベントで、このイベントはターゲットエレメント上で に作用します. ondropイベント:ドラッグされた要素がターゲット要素上で同時にマウスを離すとトリガーされたイベント.このイベントはターゲット要素上で に作用する. Event.preventDefault()メソッド:デフォルトのイベントメソッドなどの実行をブロックします.ondragoverでpreventDefault()を実行する必要があります.そうしないと、ondropイベントはトリガーされません.また、他のアプリケーションやファイルからドラッグ&ドロップした場合、特に画像の場合、デフォルトの動作はこの画像や関連情報を表示し、dropを実際に実行するわけではありません.この場合documentのondragoverイベントで直接乾かす必要があります. Event.effectAllowedプロパティ:ドラッグ&ドロップの効果です.
オブジェクト DataTransferオブジェクト:オブジェクトをドラッグして伝達するためのメディアで、一般的にEventとして使用する.dataTransfer. DataTransferオブジェクトのメソッド: setData(format,data):dataTransferオブジェクトにデータを格納します.最初のパラメータformatは、text、url、text/htmlなどの格納されたデータ型を指定するために使用されます.getData(format):dataTransferオブジェクトからデータを取り出します.
≪インスタンス｜Instance｜emdw≫
1
≪イベント｜Events｜ldap≫
//引っ張られる要素に使う
オブジェクト
≪インスタンス｜Instance｜emdw≫
// 、
var dragBox = document.querySelector("#drag_box");
//
var box = document.querySelector("#box");
//
box.addEventListener("dragenter", function(){
this.classList.add('over');
}, false);
box.addEventListener("dragleave", function(){
this.classList.remove("over");
}, false);
box.addEventListener("dragover", function(e){
e.preventDefault(); //
}, false);
box.addEventListener("drop", function(e){
//
this.appendChild(document.getElementById(e.dataTransfer.getData('dragElement')));
//
this.classList.remove("over");
},false);
//
dragBox.addEventListener("dragstart", function(e){
// dataTransfer
e.dataTransfer.setData('dragElement', this.id);
}, false);
</code></pre>
<h2> ， </h2>
<pre><code><h3> </h3>
<div id="box"></div>
<script>
//
var box = document.querySelector("#box");
//
box.addEventListener("dragenter", function(){
this.classList.add('over');
}, false);
box.addEventListener("dragleave", function(){
this.classList.remove("over");
}, false);
box.addEventListener("dragover", function(e){
e.preventDefault(); //
}, false);
box.addEventListener("drop", function(e){
e.preventDefault(); //
console.log(e)
// FileList
[].forEach.call(e.dataTransfer.files, function(itemFile){
//
readImage(itemFile);
})
this.classList.remove("over"); //
},false);
/**
*
* @param File fileObj
*/
function readImage(fileObj) {
// FileReader
var frObj = new FileReader();
//
frObj.onload = function(){
var img = document.createElement("img");
img.src = frObj.result;
document.querySelector("#box").appendChild(img);
}
//
frObj.readAsDataURL(fileObj);
}
</code></pre>
</article>
</div>
</div>
</div>
<!--PC WAP -->
<div id="SOHUCS" sid="1249377675907289088"></div>
<script type="text/javascript" src="/views/front/js/chanyan.js">