拖動時拖放更改圖像
[英]Drag-And-Drop Change Image While Dragging
問題描述
我有這個網站......
在我的網站上，我得到了這個小綠色沙發。 我需要：
1.當你開始拖動它，沙發將改變形象，以一個大的綠色沙發？ 這個大綠色沙發的鏈接。
2.當你在房間里滴在地板上（#floor）沙發它仍然是大的。
3.如果您選擇將其重新放回桌子（＃div1），它將再次變為小綠色沙發。
我的代碼：
$(document).ready(function() { $('#div2').on("drop", function(e) { e.preventDefault(); e.stopPropagation(); }); }); 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 temp = null; if(ev.target.nodeName == 'IMG'){ temp = $(ev.target); $(ev.target).parent().empty().append(document.getElementById(data)); $('#div1').append(temp); } else ev.target.appendChild(document.getElementById(data)); } $(document).on("click", "#tapetsmall", function(){ document.getElementById("walls").src="http://i.imgur.com/Ptv1Lnh.png"; });
body { background: #0c3c66; height:416px; } #holdon { position: absolute; top: calc(50% - 235px); left: calc(50% - 345px); transform: translate(-50%, -50%); } #floor { top:116px; left:393px; position:absolute; margin-bottom: 10px; height: 40px; width: 65px; background-image: url("http://i.imgur.com/tCuykFV.png") } #floor img { position: absolute; bottom: 12; left:2; } #floor:hover { background-image: url("http://i.imgur.com/cEpWRTx.png") } /* .ting:hover { -webkit-filter: drop-shadow(1px 1px 0 white) drop-shadow(-1px 1px 0 white) drop-shadow(1px -1px 0 white) drop-shadow(-1px -1px 0 white); } */ #div3 { top:0px; right:0px; position:absolute; border: 1px solid #CCC; margin-bottom: 10px; height: 100%; width: 275px; } #div4 { top:0px; right:0px; position:relative; border: 1px solid #CCC; height: 100px; width: 275px; } #dice { width:56px; height:79px; } #walls { position:absolute; top:0px; left:0px; width:688px; height:338px; border: 0px; } #menuroom { position:absolute; top:416px; left:0px; opacity:0.5; background-color: #0c3c66; width:688px; height:50px; color: white; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <head> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="js.js"></script> </head> <body> <div id="holdon"> <img id="walls" src="http://i.imgur.com/GA3vVPI.png"> <!-- Row Floor 1 --> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:122px;left:392px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:138px;left:360px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:154px;left:328px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:170px;left:296px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:186px;left:264px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:202px;left:232px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:218px;left:200px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:234px;left:168px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:250px;left:136px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:266px;left:104px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:282px;left:72px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:298px;left:40px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:314px;left:8px;"></div> <!-- Row Floor 2 --> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:138px;left:424px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:154px;left:392px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:170px;left:360px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:186px;left:328px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:202px;left:296px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:218px;left:264px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:234px;left:232px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:250px;left:200px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:266px;left:168px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:282px;left:136px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:298px;left:104px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:314px;left:72px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:330px;left:40px;"></div> <!-- Row Floor 3 --> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:154px;left:456px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:170px;left:424px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:186px;left:392px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:202px;left:360px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:218px;left:328px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:234px;left:296px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:250px;left:264px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:266px;left:232px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:282px;left:200px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:298px;left:168px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:314px;left:136px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:330px;left:104px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:346px;left:72px;"></div> <!-- Row Floor 4 --> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:170px;left:488px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:186px;left:456px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:202px;left:424px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:218px;left:392px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:234px;left:360px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:250px;left:328px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:266px;left:296px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:282px;left:264px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:298px;left:232px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:314px;left:200px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:330px;left:168px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:346px;left:136px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:362px;left:104px;"></div> <!-- Row Floor 5 --> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:186px;left:520px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:202px;left:488px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:218px;left:456px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:234px;left:424px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:250px;left:392px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:266px;left:360px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:282px;left:328px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:298px;left:296px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:314px;left:264px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:330px;left:232px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:346px;left:200px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:362px;left:168px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:378px;left:136px;"></div> <!-- Row Floor 6 --> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:202px;left:552px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:218px;left:520px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:234px;left:488px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:250px;left:456px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:266px;left:424px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:282px;left:392px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:298px;left:360px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:314px;left:328px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:330px;left:296px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:346px;left:264px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:362px;left:232px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:378px;left:200px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:394px;left:168px;"></div> <!-- Row Floor 7 --> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:218px;left:584px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:234px;left:552px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:250px;left:520px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:266px;left:488px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:282px;left:456px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:298px;left:424px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:314px;left:392px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:330px;left:360px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:346px;left:328px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:362px;left:296px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:378px;left:264px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:394px;left:232px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:410px;left:200px;"></div> <!-- Row Floor 8 --> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:234px;left:616px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:250px;left:584px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:266px;left:552px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:282px;left:520px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:298px;left:488px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:314px;left:456px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:330px;left:424px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:346px;left:392px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:362px;left:360px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:378px;left:328px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:394px;left:296px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:410px;left:264px;"></div> <div id="floor" ondrop="drop(event)" ondragover="allowDrop(event)" style="top:426px;left:232px;"></div> </div> <div id="div3"> <div id="div4"> </div> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="https://hydra-media.cursecdn.com/habbo.gamepedia.com/e/ed/Edicehc.png?version=6e01ba71341b8361df23749c65498f44" draggable="true" ondragstart="drag(event)" class="ting" id="drag1" width="56" height="79"> <img src="https://hydra-media.cursecdn.com/habbo.gamepedia.com/0/0f/Mocchamaster.png?version=6cf4d970f845287fa21d4ef7691eee84" draggable="true" ondragstart="drag(event)" class="ting" id="drag2" width="66" height="137"> <img src="//cdn.habtium.com/furni/items/small/1.gif" draggable="true" ondragstart="drag(event)" class="ting" id="clubsofa" width="36" height="36" > <img src="http://i.imgur.com/tBWoRg6.png" draggable="true" ondragstart="drag(event)" id="tapetsmall" width="32" height="32" > <img src="http://habbofever.be/wp-content/uploads/2017/02/Gold_dragon_lamp.gif" draggable="true" ondragstart="drag(event)" class="ting" id="gd" width="62" height="78" > </div> </div> </body>
1 個解決方案
解決方案1
0 已采納 2017-05-02 10:12:58
當你開始拖動它時，沙發會將圖像變成一個綠色的大沙發？
您可以使用ev.dataTransfer.setDragImage()將圖像更改為大圖像。
當你把沙發放在房間的地板上時（#floor），它仍然是最大的。
當您調用ev.target.appendChild() ，您可以檢查它是否為“floor” ev.target.appendChild()版本圖像（如果是）。
3.如果您選擇將其重新放回桌子（＃div1），它將再次變為小綠色沙發。
這與問題2的問題相同：檢查它是否為“div1”並附加小版本圖像（如果是）。
這是一個簡化的例子：
window.allowDrop = function(ev) { ev.preventDefault(); } window.drag = function(ev) { var img = document.createElement("img"); img.src = 'http://cdn.habtium.com/furni/items/big/1.gif'; ev.dataTransfer.setDragImage(img, 10, 10); ev.dataTransfer.setData("ori", ev.target.id); } window.drop = function(ev) { ev.preventDefault(); if (ev.target.id === ev.dataTransfer.getData("ori")) { return; } var img = document.createElement("img"); img.id = 'targetId_' + Math.random(); img.draggable = true; img.addEventListener('dragstart', drag); if (ev.target.id === 'div2') { img.src = 'http://cdn.habtium.com/furni/items/big/1.gif'; } else if (ev.target.id === 'div1') { img.src = 'http://lolk3070.dk/roomtest/look/club_small.gif'; } var originEle = document.getElementById(ev.dataTransfer.getData("ori")); originEle.outerHTML = ''; delete originEle; ev.target.appendChild(img); }
#div1 { float: left; width: 100px; height: 35px; margin: 10px; padding: 10px; border: 1px solid black; } #div2 { float: left; width: 200px; height: 150px; margin: 10px; padding: 10px; border: 1px solid black; }
<h2>Drag and Drop</h2> <p>Drag the image back and forth between the two div elements.</p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="http://lolk3070.dk/roomtest/look/club_small.gif" draggable="true" ondragstart="drag(event)" id="drag1"> </div> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img src="http://cdn.habtium.com/furni/items/big/1.gif" width="0" height="0">
拖放圖片上傳無法在服務器上運行
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.