HTML5 Drag & падение пункт от кнопки

я следующий код (немного изменен от http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop HTML5 Drag & падение пункт от кнопки

Я изменил его для работы с <p> элементами.

<!DOCTYPE HTML> 
<html> 
<head> 
    <style type="text/css"> 
     .div 
     { 
      width:350px;height:70px;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> 
    <div class="div" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
    <div class="div" ondrop="drop(event)" ondragover="allowDrop(event)"> 
    <p id="drag1" draggable="true" ondragstart="drag(event)" width="336" height="69">Code</p> 
    <p id="drag2" draggable="true" ondragstart="drag(event)" width="336" height="69">Code</p> 
</div> 
</body> 
</html>

Как вы можете видеть, есть в основном две коробки что вы можете перетаскивать абзацы внутри. Мой вопрос в том, как я могу перетащить абзац с кнопки? Я на самом деле работаю над этим для мобильного приложения, и мне интересно, как я могу это сделать, чтобы пользователь перетаскивал абзац из любая помощь будет оценена!

источник

2014-01-20 VCNinc

, что вы имеете в виду, что , пункт от кнопки? – Manoj

@Manoj В текущем состоянии вы перетаскиваете абзац, и он заканчивается абзацем. Я хочу, чтобы вы перетащили кнопку на страницу, за исключением того, что вместо нее она заканчивается как кнопка, она изменяется на абзац, когда вы его перетаскиваете. Надеюсь, это ясно, что я пытаюсь сделать - это очень сложно объяснить. – VCNinc

Я не знаю, насколько я понимаю, простираются ваши проблемы, я думаю, вы можете попробовать ниже код

Working DEMO

JS:

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.innerHTML+=" <p>"+document.getElementById(data).innerHTML+"</p>"; 

     }

источник

2014-01-20 14:15:17 Manoj

Большое спасибо, это именно то, что мне нужно. Просто немного изменил код, чтобы использовать jQuery, и он отлично работает. – VCNinc

HTML5 Drag & падение пункт от кнопки

ответ

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