javascript - jquery draggable / droppable change snap -

-

i attempting create series of drag/droppable divs. once div1 has been dropped, create new div , have snap @ new position. snap position remains same when div1 has been dropped , div2 being dragged: ( http://jsfiddle.net/klpgukkj/2/ )

var trackid = "path0"; var tracktype = "a";  $('.map-track-box').droppable({     tolerance: 'touch',     drop: function(event,ui){         // returns home         $('#trackdragger').animate({ top: '30px', left: '20px' },500);     } });  $('#'+trackid).droppable({     tolerance: 'touch',     drop: function(event,ui){         // in position         var pos = $('#'+trackid).position();         $('#trackdragger').animate({ top: pos.top, left: pos.left },500,function() {              $('#draggerbox').append("<div class='"+tracktype+"' style='z-index:10;position:absolute;top:"+pos.top+"px;left:"+pos.left+"px;'></div>");             $('#trackdragger').css({ top: '30px', left: '20px' },500);             $('#trackdragger').attr('class', 'd');             $('#'+trackid).removeclass('ui-droppable'); // attempted remove added class, , add new element, without luck             if(trackid=="path0") {                 trackid = "path1";             }else if(trackid=="path1") {                 trackid = "path2";                 tracktype = "d";             }else if(trackid=="path2") {                 trackid = "path3";                 tracktype = "e";             }             $('#'+trackid).addclass('ui-droppable');         });     } });   $('#trackdragger').draggable({     revert: 'invalid',     start: function(event,ui) {         $('#trackdragger').attr('class', tracktype);     },     snap: "#"+trackid, // keeps snapping initial div (path0) though trackid being changed path1,path2 etc     snapmode: "inner",     stop: function(){         var dragpos = $('#trackdragger').position();         if(dragpos.left < 101 && dragpos.top < 91) {             $('#trackdragger').attr('class', 'd');         }         //$(this).draggable('option','revert','invalid');     } });

the above works well, dragged element keeps snapping path0 (initial draggable div). there anyway force new snap location ?

thank you

as fiddle you've mentioned, bind droppable event 1 element. is

$('#'+trackid) // variable don't change "path0" other.

as understand, want other black boxes have droppable event bind.

just change code following in droppable section.

$('.path').droppable({});

this bind event every .path element in page.

see updated fiddle here.


Comments

Post a Comment

Popular posts from this blog

Android : Making Listview full screen -

-
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".mainactivity"> <edittext android:layout_margintop="5dp" android:layout_width="match_parent" android:layout_height="50dp" android:background="@drawable/location_edittext" android:id="@+id/locationeditext" android:textsize="15sp" android:textcolor="#999" android:paddingleft="15dp" /> <com.example.ravi_gupta.slider.viewpagercustomduration android:layout_width="wrap_content" android:layout_height="0dp" android:id="@+id/viewpager" android:scrollbarstyle="outsideoverlay" android:layout_weight="0.5...
Read more

javascript - Parse JSON from the body of the POST -

-
i'm using cameratag.com record video on website. service can send json response server can save data database. don't know how proceed here: the documentation states please note json repsonse passed in body of post , not form parameters. here example of how parse response in ruby: data = json.parse(request.raw_post) video_uuid = data["uuid"] but don't know how data on javascript. i'm not experienced in js please bare me :) post sample: { "uuid": "00012710-4b65-0131-ffe6-22000a499ea4", "camera_uuid": "98373a20-79ee-0130-3e42-1231390fcc11", "created_at": "2013-12-20t05:25:02.000z", "percent_complete": 100, "short_code": "kktb4q", "metadata": { }, "state": "published", "recorded_from": "http://singwho.com", "publish_type": null, "formats": [ { "name...
Read more

javascript - How to Hide Date Menu from Datepicker in yii2 -

-
basically in datetimepicker widget date choose first time, how can hide date option widget , filter according time. tried not working want hide remove button [ 'attribute'=>'time', 'label'=>'time', 'format'=>'raw', 'value'=>function($data){ return date('h:i:s',strtotime($data->time)); }, 'filter'=> datetimepicker::widget([ 'model' => $searchmodel, 'attribute' => 'time', 'clientoptions' => [ 'autoclose' => true, 'format' => 'hh:ii', 'showon' =...
Read more