この記事では、テキストと画像のドラッグアンドドロップ効果を実装するJavaScriptの方法について説明します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。
次のようにコードをコピーします：<html>
<head>
<Title> JavaScriptは、テキストと写真のドラッグアンドドロップ効果を実現します</title>
<style type = "text/css">
*{パディング：0;マージン：0;}
.tips {position：absolute; background：#eee;}
</style>
</head>
<body>
<div id = "tips1" onmouseover = "dragf.drag（ 'tips1'）;">
<img src = "/images/skinslogo.gif"> <br>画像をドラッグできます</div>
<div id = "tips2" onmouseover = "dragf.drag（ 'tips2'）;"> <a href = "// www.vevb.com" = "_ blank"> wulin.com </a> <br/>ドラッグリンクも問題ありません
</div>
</body>
<script type = "text/javascript">
var $ id = function（id）{return document.getElementbyId（id）;}
var dragf = {
ロックされた：false、
lastobj：未定義、
ドラッグ：function（obj）{
$ id（obj）.onmousedown = function（e）{
var e = e？ E：window.event;
if（！window.event）{e.preventdefault（）;}/*アノテーションのa、imgのデフォルトイベントを防止<a href = '/site/js-5791-1.html'ターゲット= '_ blank> <u>ドラッグa、browser </u> </a>*//*//
dragf.locked = true;
$ id（obj）.style.position = "absolute";
$ 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;}/* aのデフォルトイベントをブロックする、ie*/
}
document.onmouseup = function（）{
dragf.locked = false;
}
}
}
}
</script>
</html>
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。