Post
Ask Question
Sana Khan

Sana Khan

  • NA
  • 27
  • 4.9k

Drag and drop an element using jquery

Nov 25 2018 6:23 AM

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

  1. Will drag element 3x3 shape of rectangle from modal popup
  2. When drop in a div, rectangle of 3x3 should be created in div.
Below is Html code for it
  1. <%@ Page Language="C#" AutoEventWireup="true" ValidateRequest="false" CodeFile="MAPEditor.aspx.cs" Inherits="Builder_MAPEditor" %>    
  2.     
  3. <!DOCTYPE html>    
  4.     
  5. <html xmlns="http://www.w3.org/1999/xhtml">    
  6. <head runat="server">    
  7.     <title></title>    
  8.       <meta charset="utf-8">    
  9.   <meta name="viewport" content="width=device-width, initial-scale=1">    
  10.   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">    
  11.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>    
  12.   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>    
  13.     <link href="../css/custombuildermain.css" rel="stylesheet" />    
  14.     
  15.     <script>    
  16.         function abc(xyz) {    
  17.             document.getElementById('Iframe').contentWindow.FileLoad(xyz);    
  18.         }    
  19.     
  20.     
  21.         function SaveFile() {    
  22.     
  23.             var iframe = document.getElementById("Iframe");    
  24.             var innerDoc = iframe.contentDocument || iframe.contentWindow.document;    
  25.     
  26.             //get svg element.    
  27.             var svg = innerDoc.getElementById("svgcontent");    
  28.     
  29.             //get svg source.    
  30.             var serializer = new XMLSerializer();    
  31.             var source = serializer.serializeToString(svg);    
  32.     
  33.             //add name spaces.    
  34.             if (!source.match(/^<svg[^>]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/)) {    
  35.                 sourcesource = source.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');    
  36.             }    
  37.             if (!source.match(/^<svg[^>]+"http\:\/\/www\.w3\.org\/1999\/xlink"/)) {    
  38.                 sourcesource = source.replace(/^<svg/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"');    
  39.             }    
  40.     
  41.             document.getElementById("txtValue").innerText = source;    
  42.         }    
  43.     </script>    
  44. </head>    
  45. <body style="margin: 0px" >    
  46.     <form id="form1" runat="server">    
  47.         <div class="headwell">    
  48.     
  49.         </div>    
  50.     
  51.         <div>    
  52.             <img src="../Images/logo_horizontalbold1.png" class="headinglogo" />    
  53.             <textarea id="txtValue" runat="server" style="display: none"></textarea>    
  54.               <asp:Label ID="lblname" runat="server" Text="Floor Plan Builder" CssClass="lblheading"></asp:Label>    
  55.     
  56.             <asp:Button ID="btnSave" runat="server" CssClass="btncustom" Text="Save" OnClientClick="SaveFile()" OnClick="btnSave_Click" />    
  57.     
  58.             <input type="button" id="btnPreview" runat="server" visible="false" class="btncustom" style="left: 558px !important;" value="View" onclick="window.open('../Viewer/TESTEDITION2018/FPViewer.aspx');" />    
  59.             <iframe id="Iframe" src="../editor/NewEditorself.html"style="border:none; width:100%; height:700px;"></iframe>    
  60.         </div>    
  61.     </form>    
  62. </body>    
  63. </html>  
Below is javascript code of it
  1. ownrect.droppable = function () {  
  2.     //alert("hi");  
  3.   
  4. }  
  5.   
  6. btncre.droppable = function () {  
  7.     var element = SVG.get('landmarks-ground');  
  8.     var recwid = parseInt(document.querySelector("#recwid").value);  
  9.     var rechei = parseInt(document.querySelector("#rechei").value);  
  10.     var recx = parseInt(document.querySelector("#recx").value);  
  11.     var recy = parseInt(document.querySelector("#recy").value);  
  12.     var rectex = document.querySelector("#rectex").value;  
  13.     var autoincrementtext;  
  14.   
  15.     if (typeof (Storage) !== "undefined") {  
  16.         if (localStorage.clickcount) {  
  17.             localStorage.clickcount = Number(localStorage.clickcount) + 1;  
  18.         } else {  
  19.             localStorage.clickcount = 1;  
  20.         }  
  21.         autoincrementtext = localStorage.clickcount;  
  22.   
  23.     } else {  
  24.         document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";  
  25.     }  
  26.   
  27.     var group = element.group().id('test' + autoincrementtext).attr({ 'class': 'st0', 'opacity': 1, 'style': ' pointer-events: inherit;' });  
  28.   
  29.     group.rect(recwid, rechei).move(recx, recy).attr({ 'fill': 'none', 'stroke': '#000000', 'stroke-width': 0.5,'style': 'pointer-events:inherit' });  
  30.     var text = group.plain(rectex).move(recx + 10, recy + 2).attr({ 'fill': '#000000', 'stroke': '#000000', 'stroke-width': 0, 'font-size': 6, 'font-family': 'serif', 'text-anchor': 'middle', 'xml:space': 'preserve', 'fill-opacity': 1, 'stroke-opacity': 1, });  
  31.   
  32.   
  33. }  
  34. btn3X3.droppable = function () {  
  35.   
  36.     var element = SVG.get('landmarks-ground');  
  37.     var recwid = 30;  
  38.     var rechei = 30;  
  39.     var recx = 10;  
  40.     var recy = 10;  
  41.     var rectex = "Temp_";  
  42.     var autoincrementtext;  
  43.   
  44.     if (typeof (Storage) !== "undefined") {  
  45.         if (localStorage.clickcount) {  
  46.             localStorage.clickcount = Number(localStorage.clickcount) + 1;  
  47.         } else {  
  48.             localStorage.clickcount = 1;  
  49.         }  
  50.         autoincrementtext = localStorage.clickcount;  
  51.   
  52.     } else {  
  53.         document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";  
  54.     }  
  55.   
  56.     var group = element.group().id('test' + autoincrementtext).attr({ 'class': 'st0', 'opacity': 1, 'style': ' pointer-events: inherit;' });  
  57.   
  58.     group.rect(recwid, rechei).move(recx, recy).attr({ 'fill': 'none', 'stroke': '#000000', 'stroke-width': 0.5, 'style': 'pointer-events:inherit' });  
  59.     var text = group.plain(rectex + autoincrementtext).move(recx + 15, recy + 2).attr({ 'fill': '#000000', 'stroke': '#000000', 'stroke-width': 0, 'font-size': 6, 'font-family': 'serif', 'text-anchor': 'middle', 'xml:space': 'preserve', 'fill-opacity': 1, 'stroke-opacity': 1, });  
  60.   
  61. }  

I am unable to drop the element and unable to create the rectangle, tried droppable code but not working.

Below is the image where i want to drop the element

 
 
Below is the modal popup from where i will drag element
 
 

Answers (2)