заменить изображение с перетаскиванием перетаскивания

Я получил помощь от нескольких на этом сайте, разрабатывая обучающую игру с перетаскиванием, в которой учащиеся перетаскивают изображения в правильном порядке. Я смог выполнить свои задачи в Winform с Visual Basic. Теперь я пытаюсь сделать то же самое в html. Используя три функции ниже, я могу перетащить изображение из одного div в другой пустой div. Но это не сработает, если я попытаюсь сбросить изображение в div, который уже содержит изображение. Я видел ответ в StackOverflow об использовании этой строки «ev.target.removeChild (ev.target.childNodes [0]» в функции drop, но это просто создает ошибку «Аргумент 1 из Node.removeChild не является объектом. "Спасибо за вашу помощь.заменить изображение с перетаскиванием перетаскивания

<!DOCTYPE HTML> 
<html> 
<head> 
<style> 
#div1, #div2, #div3, #div4, #div5 
{float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px      solid #0066ff;} 
#btn1 
{float:left; width: 120px; height: 40px; margin: 125px; } 
</style> 
<script> 

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"); 
    //ev.target.removeChild(ev.target.childNodes[0]); //This line created an  error 
    ev.target.appendChild(document.getElementById(data)); 
} 
</script> 

</head> 
<body> 

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"><img  src='Images/grass(3).jpg' draggable="true" ondragstart="drag(event)" id="drag1"  width="88" height="31"> </div> 
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="Images/sun.jpg" draggable="true" ondragstart="drag(event)" id="drag2" width="88" height="31"> </div> 
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
<div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
<div id="div5" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 

</body> 
</html>

источник

2015-02-16 Rick n Truckee

Пожалуйста две вещи: один, обеспечивают [MCVE] (http://stackoverflow.com/help/mcve), а не краткий фрагмент кода, если MCVE не будет очень долго. Во-вторых, задайте только один вопрос на вопрос: получение одного изображения для замены другого (или, по-видимому, по крайней мере) является отдельным вопросом для их обмена. –

Убедитесь, что вы заходите на div, а не на изображение. – Musa

Муса, ты прав. , , если я увеличиваю размер div, тогда я могу перетащить второе изображение. Это может помочь, если я немного поработаю. Мое предпочтение заключалось бы в том, чтобы удалить (и скопировать) изображение в зону отбрасывания непосредственно перед тем, как я опустил новое изображение. –

После многих проб и ошибок, а также поиска в интернете, я, наконец, пришел с ответом на мой собственный вопрос. суть моего вопроса в том, что я не мог перетащить одну изображение на другом. Как правило, изображение с перетаскиванием исчезнет. То, что я действительно хотел сделать, это «обменивать» два изображения и отбрасывать изображение A на изображение B, а затем отображать изображение B, где было изображение A.

I нашел образец учебника Сью Смит на следующем веб-сайте :

http://www.webdesign.org/how-to-create-an-html5-drag-and-drop-component.22289.html

В данном примере она показывает, как настроить 6 дивы, каждый из которых с внутренней DIV с текстовой строки в каждой внутренней DIV (., Как правило, одно слово) В своем образце было очень легко перетащить и «своп» одно слово с другим. Но если вы поместите изображение в div, оно больше не будет работать.

Так что я сделал, чтобы создать идентификатор для каждого внутреннего div. Затем я назначил фоновое изображение для каждого внутреннего div, а также удалил текст. После экспериментирования с кодом Сью Смита я наконец смог выполнить замену и замену внутренних div (со связанным с ними фоновым изображением). Конечным результатом является то, что он выглядит так, как будто вы просто перетаскиваете, отбрасываете и обмениваете изображения. Это отлично работало как в Chrome, так и в Firefox. По какой-то причине он не работал в IE ver 11. Вы можете увидеть модифицированный код ниже.

<!DOCTYPE HTML> 
    <html> 
    <head> 
     <style type="text/css"> 
     .mover { 
      width:200px; height:170px; line-height:4em; margin:10px;            padding:5px; float:left; 
      border:1px dotted #333333; text-align:center; 
      } 
      #boxA{ 
       background-image: url(images/coyote.jpg) 
      } 
      #boxB{ 
       background-image: url(images/black_bear.jpg) 
      } 
      #boxC{ 
       background-image: url(images/grass.jpg) 
      } 
      #boxD{ 
       background-image: url(images/rabbits.jpg) 
      } 
      #boxE{ 
       background-image: url(images/sun.jpg) 
       } 
      </style> 
      <script type="text/javascript"> 
       function dragWord(dragEvent){ 
        dragEvent.dataTransfer.setData("Id", dragEvent.target.id+"|"+dragEvent.target.parentNode.id); 
       }     
       function dropWord(dropEvent){ 
       var dropData = dropEvent.dataTransfer.getData("Id"); 
       dropItems = dropData.split("|"); 
       var prevElem = document.getElementById(dropItems[1]); 
       prevElem.getElementsByTagName("div")[0].id =  dropEvent.target.id;    
       dropEvent.target.id = dropItems[0]; 
       dropEvent.preventDefault(); 
       } 
       </script> 
       </head> 
       <body> <div><em>Drag and drop the pictures in order to show  how energy moves through a food chain.</em></div> 
        <div id="box1" ondragover="event.preventDefault()"  ondrop="dropWord(event)" > 
        <div class="mover" id="boxA" draggable="true"  ondragstart="dragWord(event)" ></div> 
        </div> 
        <div id="box2" ondragover="event.preventDefault()"  ondrop="dropWord(event)"> 
        <div class="mover" id="boxB" draggable="true"  ondragstart="dragWord(event)"></div> 
        </div> 
        <div id="box3" ondragover="event.preventDefault()"  ondrop="dropWord(event)"> 
        <div class="mover" id="boxC" draggable="true"  ondragstart="dragWord(event)"></div> 
        </div> 
        <div id="box4" ondragover="event.preventDefault()"  ondrop="dropWord(event)"> 
        <div class="mover" id="boxD" draggable="true"  ondragstart="dragWord(event)"></div> 
        </div> 
        <div id="box5" ondragover="event.preventDefault()"  ondrop="dropWord(event)"> 
        <div class="mover" id="boxE" draggable="true"  ondragstart="dragWord(event)"></div> 
        </div>          
      </body> 
      </html>

источник

2015-02-24 21:59:14

заменить изображение с перетаскиванием перетаскивания

ответ

Смежные вопросы