Question

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

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

Answer 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示例中看到它。

注意：您不必在下面的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

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

在Drag N Drop上动态添加HTML

1 个答案: