HTML5 Перетаскивание абзаца из кнопки

0

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

Я изменил его для работы с элементами <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>

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

  • 0
    что ты имеешь в виду, абзац с кнопки?
  • 0
    @Manoj В текущем состоянии вы перетаскиваете абзац, и он заканчивается как абзац. Я хочу, чтобы вы перетаскивали кнопку на страницу, за исключением того, что вместо кнопки она превращается в абзац при перетаскивании. Надеюсь, понятно, что я пытаюсь сделать - это очень сложно объяснить.
Теги:
drag-and-drop

1 ответ

1
Лучший ответ

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

Рабочий ДЕМО

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>";

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню