Merge pull request #382 from xwu2git/master

drag and drop made natural
OpenVisualCloud · Apr 25, 2020 · 6859dd3 · 6859dd3
2 parents c98945b + 102d267
commit 6859dd3
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/cloud/html/js/preview.js b/cloud/html/js/preview.js
@@ -16,15 +16,19 @@ var preview={
             sensorctx.marker.closeTooltip();
             preview.play(div,sensor);
 
+            var offset={x:0,y:0};
             div.attr('draggable','true').bind('dragstart',function (e) {
+                var divoffset=$(this).offset();
+                offset={x:e.pageX-divoffset.left,y:e.pageY-divoffset.top};
                 e.originalEvent.dataTransfer.setData("application/json",JSON.stringify(sensor));
                 page.find("#mapCanvas").unbind('dragover').on('dragover', function (e) {
                     e.preventDefault();
                 }).unbind('drop').on('drop', function (e) {
                     e.preventDefault();
                     var div=$("[template] [preview-template]").clone().addClass("max-size");
                     var icon=L.divIcon({html:div[0],iconSize:[300,200],iconAnchor:[0,0]});
-                    var marker=L.marker(map.mouseEventToLatLng(e),{icon:icon,draggable:true}).addTo(page.data('preview').layer);
+                    var e1={clientX:e.clientX-offset.x,clientY:e.clientY-offset.y};
+                    var marker=L.marker(map.mouseEventToLatLng(e1),{icon:icon,draggable:true}).addTo(page.data('preview').layer);
                     marker._zoomargs={zoom:map.getZoom(),width:300,height:200};
                     $(marker._icon).addClass("page-home-preview-screen");
                     var sensor1=JSON.parse(e.originalEvent.dataTransfer.getData("application/json"));

diff --git a/cloud/html/js/stats.js b/cloud/html/js/stats.js
@@ -70,15 +70,19 @@ var stats={
     },
     create: function (sensorctx, sensor, page, map, create_chart_icon) {
 	    sensorctx.text=L.tooltip({permanent:true,direction:'center',className:'tooltip_text'});
+        var offset={x:0,y:0};
         var div=$('<div class="page-stats" draggable="true"><canvas class="max-size"></canvas></div>').on('dragstart', function (e) {
+            var divoffset=$(this).offset();
+            offset={x:e.pageX-divoffset.left,y:e.pageY-divoffset.top};
             e.originalEvent.dataTransfer.setData('application/json',JSON.stringify(sensor));
             page.find("#mapCanvas").unbind('dragover').on('dragover', function (e) {
                 e.preventDefault();
             }).unbind('drop').on('drop', function (e) {
                 e.preventDefault();
                 var div1=div.clone().removeAttr('draggable').css({width:'100%',height:'100%'});
                 var icon1=L.divIcon({html:div1[0],iconSize:[350,200],iconAnchor:[0,0]});
-                var marker1=L.marker(map.mouseEventToLatLng(e),{icon:icon1,draggable:true}).addTo(page.data('stat').layer);
+                var e1={clientX:e.clientX-offset.x,clientY:e.clientY-offset.y};
+                var marker1=L.marker(map.mouseEventToLatLng(e1),{icon:icon1,draggable:true}).addTo(page.data('stat').layer);
                 marker1._sensor=JSON.parse(e.originalEvent.dataTransfer.getData('application/json'));
                 marker1._chart=stats.create_chart(div1.find('canvas'));
                 marker1._zoomargs={zoom:map.getZoom(),width:350,height:200};