HTML5 Drag и падение Выпуск

Спасибо за глядя на этот постHTML5 Drag и падение Выпуск

Я получил страницу jsFiddle до продемонстрировать мой вопрос my js fiddle

<!DOCTYPE HTML> 
<html> 
<head> 
    <style type="text/css"> 
     #div1 {width:200px;height:200px;padding:10px;border:1px solid #aaaaaa;} 
     #div2 {width:200px;height:200px;padding:10px;border:1px solid #aaaaaa;} 
     #div3 {width:200px;height:200px;padding:10px;border:1px solid #aaaaaa;} 
    </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.appendChild(document.getElementById(data)); 
     } 
    </script> 
</head> 
<body> 
    <center> 
     <p>Drag the image you want into this box!</p> 
     <table> 
      <tr> 
       <td><p><b>Main Image</b></p><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td> 
       <td><p><b>Image 2</b></p><div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td> 
       <td><p><b>Image 3</b></p><div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td> 
      </tr> 
     </table> 
    <img id="drag1" ondrop="drop(event)" draggable="true" width="150" height="150" ondragstart="drag(event)" src="http://netdna.webdesignerdepot.com/uploads/2013/02/thumbnail32.jpg" alt="img01"/></a> 
    <img id="drag2" ondrop="drop(event)" draggable="true" width="150" height="150" ondragstart="drag(event)" src="http://netdna.webdesignerdepot.com/uploads/html5-css3-wireframing/html5-logo.jpg" alt="img02"/></a> 
    <img id="drag3" ondrop="drop(event)" draggable="true" width="150" height="150" ondragstart="drag(event)"src="http://netdna.webdesignerdepot.com/uploads/2012/12/thumb-1.jpg" alt="img03"/></a> 
</body> 
</html>

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

ДИВ которого изображение перетащить в должен захватить изображение также, должен новый объект перетащить в тот же DIV (который ранее уже падать другое изображение), новый образ должен перезаписать старый образ.

Другой вопрос. Если у меня есть кнопка отправки с сообщением формы, взяв значение div1, div2, div3, сможет ли браузер захватить ввод пользователя? например, drag1, drag2 или drag3.

Любой может помочь мне решить проблему, спасибо за помощь!

Обновлено с помощью этого jsFiddle:

function drop(ev) 
{ 
ev.preventDefault(); 
var data=ev.dataTransfer.getData("Text"); 
var new_img = $('#'+data).clone(); 
$('#'+ev.target.id).html(new_img); 
}

Используя ответ ниже, исходное изображение сохранить. но проблема в том, что я перетаскиваю другое изображение в поле, которое уже имеет изображение, оно не будет перезаписываться.

источник

2013-10-11 user1777711

Решение первого вопроса здесь: http://stackoverflow.com/questions/12259144/how-to-drag-and-drop-a-copy-of-another- drag-n-drop-image-using-html5 – Joao

назад я сделал скрипку для себя, подумал, что это может помочь ... http: //jsbin.com/oluhuk/2/edit – codebreaker

@ João любой может помочь мне с обновленной версией – user1777711

Я внес некоторые изменения в функцию капли.

function drop(ev) 
{ 
ev.preventDefault(); 
var data=ev.dataTransfer.getData("Text"); 
var new_img = $('#'+data).clone(); 
$('#'+ev.target.id).html(new_img); 
}

try this

источник

2013-10-11 09:54:26 Nauphal

Привет, я пробовал ваш код, но если я поместил другой объект в том же поле, он не может быть перезаписан новым изображением. – user1777711

HTML5 Drag и падение Выпуск

ответ

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