javascript - Jquery drag drop revert to original position and div on double click -

-

i have drag-and-drop items, intended dragged 1 div , dropped div. capture original position of each item in hidden fields when created.

i want items go original div , location on dblclick, relocate inside drop target div.

any ideas?

<div id="cardpiles">   <div id="d1" class="draggable" ondblclick="rev(this)">1</div>   <div id="d2" class="draggable" ondblclick="rev(this)">2</div>   <div id="d3" class="draggable" ondblclick="rev(this)">3</div>   <div id="d4" class="draggable" ondblclick="rev(this)">4</div>   <div id="d5" class="draggable" ondblclick="rev(this)">5</div>   <div id="d6" class="draggable" ondblclick="rev(this)">6</div>  </div> 
function rev(me) {   var b = $(me).text();   var h = $('#h' + b).text();   var s = h.split(',');   var top = s[0];   var left =s[1];   $(me).parent().css({ position: 'relative' });  //tried absolute   $(me).css({top:top,left:left,position:'absolute' }); }

here possible answer. if not fit use case, edit post more details.

working example: https://jsfiddle.net/twisty/u1rd9dpg/6/

html

<div id="cardpiles">   <div id="d1" class="draggable ui-widget-content" data-origin="">1</div>   <div id="d2" class="draggable ui-widget-content" data-origin="">2</div>   <div id="d3" class="draggable ui-widget-content" data-origin="">3</div>   <div id="d4" class="draggable ui-widget-content" data-origin="">4</div>   <div id="d5" class="draggable ui-widget-content" data-origin="">5</div>   <div id="d6" class="draggable ui-widget-content" data-origin="">6</div> </div> <div id="carddrop"> </div>

jquery

function rev(me) {   console.log("doubleclick detected.");   var pos = me.data("origin");   console.log("returning to: ", pos);   var $o = me.clone();   $o.draggable({     cursor: "move",     start: log   });   me.remove();   if ($("#cardpiles div").length == 0) {     $("#cardpiles").append($o);     return true;   }   $("#cardpiles .draggable").each(function(k, v) {     var txt = parseint($(v).text());     if ($o.data("order") < txt) {       $(v).before($o);       return false;     } else {       $("#cardpiles").append($o);     }   });  }  function log(e, ui) {   var pos = ui.offset;   var $ob = $("#" + ui.helper.attr("id"));   pos.order = parseint(ui.helper.text());   $ob.attr("data-top", pos.top);   $ob.attr("data-left", pos.left);   $ob.attr("data-order", pos.order);   $ob.attr("data-origin", [pos.top, pos.left, pos.order].join(","));   console.log("dragstart position: ", pos);   console.log("logged: " + [$ob.data("top"), $ob.data("left"), $ob.data("order")].join(",")); }  $(function() {   $(".draggable").draggable({     cursor: "move",     start: log   });   $("#carddrop").on("dblclick", ".dropped", function() {     console.log("origin found: ", $(this).data("origin"), $(this).data("top"));     rev($(this));   });   $("#carddrop").droppable({     accept: "#cardpiles div",     activeclass: "ui-state-highlight",     drop: function(e, ui) {       var $drop = ui.draggable.clone();       console.log("dropped. origin: ", $drop.data("origin"));       $drop.removeattr("style");       $drop.addclass("dropped");       $(this).append($drop);       ui.draggable.remove();       var c = $("#carddrop div").length;     }   }).sortable({     revert: true   }); });

i'm not sure if need in css or not, went based on order , let css define how appear in list.

when drag starts, log origin details various data attributes. allows them retrieved later when there interaction element.

when drop happens, clone original , append clone. not have this, yet me, helps me identify whats happening. since it's no longer draggable, remove class, added dropped able more catch double click event.

when dblclick fires on our object, clone again, , re-append back. make .draggable() again too. hunt next item's number , fit in underneath.

if text within not easy order that, add order attribute or populate data-order attribute. can when it's dragged or read id... not sure might work best you.

you can on , on , drag of them out of #cardpile if like.


Comments

Post a Comment

Popular posts from this blog

c# - How Configure Devart dotConnect for SQLite Code First? -

-
can configure following sample code ? when run following code, error : no entity framework provider found ado.net provider invariant name 'devart.data.sqlite' setting in machine.config <system.data> <dbproviderfactories> <add name="dotconnect sqlite" invariant="devart.data.sqlite" description="devart dotconnect sqlite" type="devart.data.sqlite.sqliteproviderfactory, devart.data.sqlite, version=4.6.287.0, culture=neutral, publickeytoken=09af7300eec23701" /> </dbproviderfactories> </system.data> after add below block code in app.config <?xml version="1.0"?> <configuration>   <configsections> <!-- more information on entity framework configuration, visit http://go.microsoft.com/fwlink/?linkid=237468 --> <section name="entityframework" type="system.data.entity.internal.configfile.entityframeworksection, entit...
Read more

java - Copying object fields -

-
what best way of copying classes when need have 2 independent variables? have simple class: public class myclass { boolean = false; string b= "not empty"; } do need make method : assign(myclass data ) { a= data.a; b= data.b; } is there automatic method copy (duplicate) objects in java? do need make method : pretty close. instead of making method, should make constructor. such constructors called copy constructor , , create them this: myclass(myclass data) { = data.a; b = data.b; } and create copy of instance, use constructor this: myclass obj1 = new myclass(); myclass obj2 = new myclass(obj1); copy constructor can tedious : using copy constructor create deep-copy can tedious, when class has mutable fields. in case, assignment create copy of reference, , not object itself. have create copy of fields (if want deep copy). can go recursive. a better way create deep copy serialize , deserialize object. why not use clone()? ...
Read more

c++ - Clear the memory after returning a vector in a function -

-
i have function processes , stores lot of data in , returns results vector of class. amount of data stored in function tremendous , want clear storage memory of function after finished job. necessary (does function automatically clear memory) or should clear memory function? update: vector<customers> process(char* const *filename, vector<int> id) { vector<customers> list_of_customers; (perform actions) return list_of_customers; } variables defined locally within function automatically released @ end of function scope. destructors objects called, should free memory allocated objects (if objects coded correctly). example of such object std::vector . anything you've allocated new must have corresponding delete release storage. try avoid doing own allocation , use raii instead, i.e. containers or smart pointers.
Read more