javascript - (re)store position and size of EACH cloned draggable JQuery -


i have div (canvas), acts droppable rects. rects, dropped on div, cloned , can dragged , resized within div.

my questions is: how can (re)store position, size of dynamically cloned elements?

how works: drag more 1 rect onto canvas resize or drag within rect click save

by now, gives me correct number of cloned rects, saves position , size of last cloned element.

how can add hidden textfields each cloned rect separately?

$(function() {    $('#rect').draggable({      revert: "invalid",      helper: function(event, ui) {        return $(this).clone(true);      }      });      $('#bu').click(function() {      alert("no of rect set: " + $('.rectset').length);        $('.rectset').each(function() {        var postop = $('input#postop').val();        var posleft = $('input#posleft').val();        var height = $('input#sizeheight').val();        var width = $('input#sizewidth').val();          alert("left: " + posleft + ", top: " + postop +          " ,height: " + height + ", width: " + width);      });    });        $("#canvas").droppable({      accept: "#rect",      drop: function(e, ui) {        if ($(ui.draggable).hasclass('ui-draggable-dragging')) {          /*alert("rect dragged , not copied again");*/          return          }          var droppedrect = $(ui.draggable).clone().addclass('rectset')            droppedrect.append('<input type="hidden" id="posleft" value="empty"></input>');        droppedrect.append('<input type="hidden" id="postop" value="empty"></input>');        droppedrect.append('<input type="hidden" id="sizewidth" value="empty"></input>');        droppedrect.append('<input type="hidden" id="sizeheight" value="empty"></input>');          droppedrect.appendto(this);          droppedrect.draggable({          containment: "#canvas",          scroll: false,          stop: function(event, ui) {            //	alert($('input#posleft').val() + " " + $('input#postop').val()) ;            var posleft = ui.position.left;            var postop = ui.position.top;            $('input#posleft').attr('value', posleft);            $('input#postop').attr('value', postop);            alert($('input#posleft').val() + " " + $('input#postop').val());            }        }).resizable({          ghost: true,          containment: "#canvas",          stop: function(event, ui) {            $('#size').attr('value', ui.size)              var width = ui.size.width;            var height = ui.size.height;            //       alert($('input#sizewidth').val() + " " + $('input#sizeheight').val()) ;            $('input#sizewidth').attr('value', width);            $('input#sizeheight').attr('value', height);            alert($('input#sizewidth').val() + " " + $('input#sizeheight').val());            }        });      }    });    });
#canvas {    width: 700px;    height: 400px;    border: 10px solid black;    padding: 15px 15px 15px 150px;  }    #rect {    border: 3px solid black;    background: #ffff99;    width: 100px;    height: 100px;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" />  <script src="https://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>  <button id="bu" onclick="save()">save</button >  <div id="rect" class="ui-widget-content"> </div>   <div id="canvas" class="ui-widget-header">

like mike said, ids need unique. solved adding counter var = 0, on each new droppedrect setting id attribute number incremented. also, think better way achieve same goal of putting data onto rectangles through jquery.data. used jqueryui 1.9 because being used in fiddle.

$(function() {    $('#rect').draggable({      revert: "invalid",      helper: function(event, ui) {        return $(this).clone(true);      }    });    var = 0;    $('#bu').click(function() {      console.log("no of rect set: " + $('.rectset').length);        $('.rectset').each(function(a, b) {        console.log("left: " + $(b).data('posleft') + ", top: " + $(b).data('postop') +          " ,height: " + $(b).data('height') + ", width: " + $(b).data('width'))      });    });      $("#canvas").droppable({      accept: "#rect",      drop: function(e, ui) {        if ($(ui.draggable).hasclass('ui-draggable-dragging')) {          return;        }          var droppedrect = $(ui.draggable).clone().addclass('rectset').attr('id', i++)          .appendto(this)          .data({            'posleft': ui.position.left,            'postop': ui.position.top,            'width': ui.draggable[0].offsetwidth,            'height': ui.draggable[0].offsetheight          });        console.log("dropped - left: " + ui.position.left + " top:" + ui.position.top + " width: " + ui.draggable[0].offsetwidth + " height: " + ui.draggable[0].offsetheight);        droppedrect.draggable({          containment: "#canvas",          scroll: false,          stop: function(event, ui) {            $(this).data('posleft', ui.position.left);            $(this).data('postop', ui.position.top);            console.log("moved - left: " + ui.position.left + " top:" + ui.position.top);            }        }).resizable({          ghost: true,          containment: "#canvas",          stop: function(event, ui) {            $(this).data('width', ui.size.width);            $(this).data('height', ui.size.height);            console.log("resized - width: " + ui.size.width + " height: " + ui.size.height);          }        });      }    });  });
#canvas {    width: 700px;    height: 400px;    border: 10px solid black;    padding: 15px 15px 15px 150px;  }    .rect {    border: 3px solid black;    background: #ffff99!important;    width: 100px;    height: 100px;  }
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet"/>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  <script src="https://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>    <button id="bu">save</button >  <div id="rect" class="rect ui-widget-content"> </div>   <div id="canvas" class="ui-widget-header">


Comments

Post a Comment

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

i've set bento/ubuntu-16.04 vagrant box using php 5.6, , getting following error quite few times when try , run shell script: "uncaught reflection exception: class domdocument not exist". i've tried adding following top of script (not together), each no success: "sudo apt-get install php5.6-xml", "sudo apt-get install php5-xml", "sudo apt-get install php-dom" i've tried resetting server "sudo service apache2 restart". does have suggestions?
Read more

vue.js - Create hooks for automated testing -

Image
qa guys complained can't automate frontend testing. because our html looks same outside. lazy hack did this <template> <div :role="$options.name"> ... </div> </template> <script> export default { name: 'vmcomponentname' } </script> which takes name script , applies html. in browser get: <div role="vmcomponentname"> ... </div> line :role="$options.name" goes in every component. is there dry er solutions? please share. additional details i'll explain in details looking for. imagine have vmusercreate form creates user. test case can create user . to automatically test without role, have use following selector: .wrapper > .wrapper > .wrapper > .submit-button the test extremely brittle (will break lot). if use roles can use [role="vmusercreateform"] .submit-button selector. many folds less brittle. so basically, i'm ...
Read more

Add new key value to json node in java -

i have json file : { "id":1, "name":"abc", "addressdetails": { "city":"newyork" } } i wanted add 1 more key-value ("pincode" : "414141") node 'addressdetails'. i tried using : objectmapper mapper = new objectmapper(); jsonnode root = mapper.readtree(new file("d://test.json")); objectnode node = mapper.createobjectnode(); node.with("addressdetails").put("pincode", "414141"); but it's not getting added, there way can ? you can try you should modify file path objectmapper mapper = new objectmapper(); objectnode nodes = mapper.readvalue(new file("d:\\test.txt"), objectnode.class); nodes.with("addressdetails").put("pincode", "414141"); mapper.writer().writevalue(new file("d:\\test.txt"), nodes);
Read more