やあみんな、私はドラッグ アンド ドロップ機能を使用して、基本的にリストからイメージをドロップしてドロップ ボックスにドロップし、何らかのイベントをトリガーします。しかし、画像をドラッグ アンド ドロップすると、ドロップ ボックスの下ではなく、上に複製されます。
(編集: jquery coverscroll プラグインのホームページ: http://slobodan.99k.org/plugins/coverscroll.html )
私の人生では、なぜこれを行うのかわかりません。スライド画像効果を追加するためにダウンロードした外部スクリプトを使用しています。これが私のコードです。
CSS
body {
font-family:Arial, Helvetica, sans-serif;
}
#container2 {
width:850px;
height:200px;
margin-left:25px;
}
#container2 img, #container2 .item {
width:100%;
height:100%;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0px 5px 5px #777;
-webkit-box-shadow: 0px 5px 5px #777;
box-shadow: 0px 5px 5px #777;
}
#dragBox {
width:336px;
height:221px;
margin:10px;
padding:10px;
border:1px solid #aaaaaa;
}
脚本
鬼ごっこ
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script src="scripts/jquery.coverscroll.min.js"></script>
JavaScript
function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("Text"); var theNode = document.getElementById(data); var nodeCopy = theNode.cloneNode(true); ev.target.appendChild(nodeCopy); if (data == "drag1") { foodOne(); } if (data == "drag2") { foodTwo(); } ev.target.removeChild(nodeCopy); } function foodOne() { alert("You choose Food One"); } function foodTwo() { alert("You choose Food Two"); }
HTML
<div id="container2">
<img id="drag1" src="foodOne.jpg" draggable="true" ondragstart="drag(event)"
width="336" height="221">
<img id="drag2" src="foodTwo.jpg" draggable="true" ondragstart="drag(event)"
width="336" height="221">
<img id="drag1" src="foodThree.jpg" draggable="true" ondragstart="drag(event)"
width="336" height="221">
<img id="drag2" src="foodFour.jpg" draggable="true" ondragstart="drag(event)"
width="336" height="221">
</div>
<script>
$('#container2').coverscroll();
</script>
<br/>
<br/>
<br/>
<br/>
<div div align="center">
<div id="dragBox" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
誰かがこれを手伝うことができれば、それは素晴らしいことです。
実際のドラッグ アンド ドロップを行う前は、次のようになります。
そして、画像をボックスにドロップした後: