Drag and drop an element using jquery

Want to drag and drop an element from modal popup to a div using jquery in SVG floor plan. At firsti was trying by to create rectangle by using onclick function but now requirement is to drag element and on drop of element rectangle should be created.

For example if i am dragging 3x3 element that rectangle should be created of size 3X3.

Steps that i am following

Will drag element 3x3 shape of rectangle from modal popup
When drop in a div, rectangle of 3x3 should be created in div.

Below is Html code for it

<%@ Page Language="C#" AutoEventWireup="true" ValidateRequest="false" CodeFile="MAPEditor.aspx.cs" Inherits="Builder_MAPEditor" %>
"http://www.w3.org/1999/xhtml">
"server">
"utf-8">
"viewport" content="width=device-width, initial-scale=1">
"stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
"../css/custombuildermain.css" rel="stylesheet" />
"margin: 0px" >
"form1" runat="server">
class="headwell">

"../Images/logo_horizontalbold1.png" class="headinglogo" />

"txtValue" runat="server" style="display: none">

"lblname" runat="server" Text="Floor Plan Builder" CssClass="lblheading">

"btnSave" runat="server" CssClass="btncustom" Text="Save" OnClientClick="SaveFile()" OnClick="btnSave_Click" />

"button" id="btnPreview" runat="server" visible="false" class="btncustom" style="left: 558px !important;" value="View" onclick="window.open('../Viewer/TESTEDITION2018/FPViewer.aspx');" />

"Iframe" src="../editor/NewEditorself.html"style="border:none; width:100%; height:700px;">

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Sana Khan7y ago
Hi mounikasweety sweety,

I tried your example but it is showing just blank page with only text as Drag Table.

below is the code

Drag Table

and below is the output
7y ago
1. function dragStart(event)
2. {
3. event.dataTransfer.setData("Text", event.target.id);
4. }
5. function allowDrop(event)
6. {
7. event.preventDefault();
8. }
9. function drop(event)
10. {
11. $("#maincontainer").append("
  NameCountryExperienceTechnologies Bhanu Pratap India 3 years Javascript,Jquery,AngularJS,ASP.NET C#, XML,HTML,CSS,Telerik,XSLT,AJAX,etc...");
12. }
13. .droptarget { float: left; min-height: 100px; min-width: 200px; border: 1px solid black; margin: 15px; padding: 10px; border: 1px solid #aaaaaa; } [contentEditable=true]:empty:not(:focus):before { content: attr(data-text);
14. }
1. "https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
2. class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
3. "dragStart(event)" draggable="true" id="dragtarget">Drag Table
"maincontainer" contenteditable=true data-text="Drop here..." class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">

this is just simple here i'm appending html table into a div at the end

we can achieve this or anything with a simple concept of calling a JavaScript function when we want (here on drop.)

In this example you can drag & drop any number of tables, new table will be added below the last table exists in the div otherwise it will be the first table in the div.

here we can add text between tables or we can say the section where we drop tables is editable we can type text between tables. enter image description here

Thanks... :)