在拖放时动态添加 HTML答案

【问题标题】：Add HTML Dynamically on Drag N Drop在拖放时动态添加 HTML
【发布时间】：2014-12-12 13:01:42
【问题描述】：

在网页上拖放 html 元素或内容的简单方法？

目标是将元素拖放到容器上。
一旦元素被删除，它将根据其 id 动态添加 html 内容。

【问题讨论】：

标签： javascript jquery jquery-ui drag-and-drop

【解决方案1】：

首先，您需要使用以下代码创建一个 html 页面。

HTML：

    <!DOCTYPE html>
<html>
    <head>
        <title>Drag N Drop Elements</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>

        <!-- The element to be dragged and dropped -->
        <span class="elements" id="paragraph">|Paragraph|</span>

        <!-- The target for the dragged elements -->
        <div id="document-section">This is the target for the drag n drop.</div>


        <!--import javascript-->
        <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>        
        <script src="dragndrop.js"></script>
    </body>
</html>

上面示例中的以下 html 是稍后添加的所有 javascript 完成后您可以拖动的元素。

<span class="elements" id="paragraph">|Paragraph|</span>

注意：您可以添加其他可拖动元素，方法是为它们提供类元素并分配不同的 id。

要讨论的下一个重要元素是页面上将要放置可拖动元素的区域。为了允许在该区域中删除元素，我为其分配了 #document-section 的 ID，您将在稍后的 javascipt 示例中看到该 ID。

注意：您不必在下面的 div 元素中使用文本，但请确保它具有一定的宽度、高度和边框，以便用户可以看到放置元素的位置。

<div id="document-section">This is the target for the drag n drop.</div>

接下来，您需要创建一个名为 dragndrop.js 的 javascript 文件，并将其放在与您在第一步中创建的 html 文件相同的文件夹中。

Javascript：

                //store the id of the item being dragged
                var dragging;         

                /*make all of the elements draggable*/
                $(".elements").draggable({helper:"clone"});

                 /*on dragstart event for .elements*/  
                $(".elements").on("dragstart",function(){

                    //get the id of the element being dragged
                    dragging = $(this).attr("id");


                });//end on dragstart event for .elements


         //fire event when an element is dropped on #document-section div  
          $("#document-section").droppable({//begin droppable event

       drop: function(event,ui) {//begin drop function




             //switch case statement used to detect what element has been dropped
             switch(dragging){//begin switch case


                  case "paragraph":   


                  //array to hold the paragraph
                  var paragraph = [];



    //if dragging variable equals "paragraph"
    if(dragging === "paragraph"){//begin if then


      //add the paragraph
      paragraph.push('<p>Hello, I am a paragraph</p>');

    //append the paragraph to your container I used #document-section in this example
   $("#document-section").append(paragraph.join(""));

    //set dragging to null to prevent duplicate elements being creating on drop
    dragging = null;

                 break;               


             }//end switch case  


             }//end if then    


      }//end drop function
    });//end droppable event

完成后，您应该能够将“段落”文本拖到“这是拖放的目标。”，然后查看结果。

【讨论】：