この記事では、テキストと画像のドラッグアンドドロップ効果を実装する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プログラミングに役立つことを願っています。