JavaScript_javascript スキルを使用してテキストと画像にドラッグ アンド ドロップ効果を実装する方法

この記事の例では、JavaScript を使用してテキストと画像のドラッグ効果を実現する方法を説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。

コードをコピー コードは次のとおりです:

<頭>

画像はドラッグできます

リンクをドラッグすることもできます

<スクリプトタイプ="text/javascript">
var $id=function(id){return document.getElementById(id);}
varragF={
ロック済み:false、
lastObj:未定義、
ドラッグ:関数(obj){
$id(obj).onmousedown=function(e){
var e = e ? e : window.event;
if(!window.event) {e.preventDefault();}/* ラベルブラウザ< ;/u>を防止します;ドラッグ a (img*/
のデフォルト イベント) ragF.locked=true;
$id(obj).style.position="絶対";
$id(obj).style.zIndex="100";
if (dragF.lastObj&&dragF.lastObj!=$id(obj)) {/* 複数要素のドラッグでは最後の要素の状態を復元する必要があります */
DragF.lastObj.style.zIndex = "1";
}
DragF.lastObj=$id(obj);
var tempX=$id(obj).offsetLeft;
var tempY=$id(obj).offsetTop;
DragF.x=e.clientX;
DragF.y=e.clientY;
document.onmousemove=function(e){
var e = e ? e : window.event;
If(dragF.locked==false) は false を返します;
$id(obj).style.left=tempX e.clientX-dragF.x "px";
$id(obj).style.top=tempY e.clientY-dragF.y "px";
If(window.event) {e.returnValue=false;}/* ie の下の a と img のデフォルト イベントを防止します */
}
document.onmouseup=function(){
DragF.locked=false;
}
}
}
}

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。