实现 mouse-drag 的图标拖动

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <title>Maps Toolbar</title>

	<link rel="stylesheet" href="http://localhost:6081/arcgis_js/3.13/library/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://localhost:6081/arcgis_js/3.13/library/esri/css/esri.css">
    <script src="http://localhost:6081/arcgis_js/3.13/library/init.js"></script>

	<style>
	body {
		width:100%;
		height:100%;
		margin:0;
		padding:0;
		position:absolute;
	}
	</style>

    <script type="text/javascript">
	var map,_x,_y,isDrag,layers={};
	require([
	‘esri/map‘,
	‘esri/layers/ArcGISTiledMapServiceLayer‘, ‘esri/layers/GraphicsLayer‘,‘esri/layers/TiledMapServiceLayer‘, ‘esri/layers/FeatureLayer‘,
	‘esri/graphic‘,‘esri/geometry/Point‘,‘esri/geometry/Circle‘,‘esri/InfoTemplate‘,‘esri/toolbars/draw‘, ‘esri/toolbars/edit‘,
	‘esri/symbols/SimpleFillSymbol‘, ‘esri/symbols/SimpleLineSymbol‘, ‘esri/symbols/PictureMarkerSymbol‘,‘esri/symbols/SimpleMarkerSymbol‘,
	‘esri/renderers/SimpleRenderer‘, ‘esri/Color‘,‘esri/tasks/LengthsParameters‘,‘esri/tasks/AreasAndLengthsParameters‘,‘esri/tasks/BufferParameters‘,
	‘dijit/registry‘],function(){

		init();

	});

	function init() {
		map = new esri.Map("map");
		var bk_map = new esri.layers.ArcGISTiledMapServiceLayer(‘http://192.168.0.244:6080/arcgis/rest/services/bkMap_VEC_BS/MapServer‘);
		map.addLayer(bk_map);
		dojo.connect(map, "onMouseDrag", showCoordinates);
		dojo.connect(map, "onMouseMove", showCoordinates);

		layers.dragIocLayer = new esri.layers.GraphicsLayer();
		map.addLayer(layers.dragIocLayer);
		var pointSymbol = new esri.symbol.PictureMarkerSymbol(‘img/center.jpg‘, 23, 23);
		var drawSimpleRender = new esri.renderer.SimpleRenderer(pointSymbol);
		layers.dragIocLayer.setRenderer(drawSimpleRender);
		layers.dragIocLayer.add(new esri.Graphic(new esri.geometry.Point(106.22572,29.65875, map.spatialReference)));

		layers.dragIocLayer.on("mouse-down", function(evt) {
			map.disablePan();
			isDrag = true;
		});
		map.on("mouse-up", function(evt) {
			if(isDrag){
				isDrag = false;
				map.enablePan();
				console.info(_x+","+_y);
			}
		});

	}

	 // 显示坐标
	function showCoordinates(evt) {
		var mp = evt.mapPoint;
		_x = mp.x.toFixed(5);
		_y = mp.y.toFixed(5);
		if(isDrag){
			layers.dragIocLayer.clear();
			layers.dragIocLayer.add(new esri.Graphic(new esri.geometry.Point(_x,_y, map.spatialReference)));
		}
	}

    </script>
  </head>
  <body>
    <div id="map" style="width:100%; height:100%;"></div>
  </body>
</html>

  

时间: 2024-11-08 22:20:54

实现 mouse-drag 的图标拖动的相关文章

Extjs4.2 Desktop 桌面图标拖动白屏的解决

上次做了个extjs4.2的desktop桌面demo,把desktop从原始包中剥离出来,并实现了桌面图标换列,桌面图标拖动,但用户反映桌面图标拖动会出现白屏,经测试,在 extjs4.2和Extjs5.0中都存在这个问题, 经反复跟踪调试,发现自己增加的代码并没有问题,问题出在extjs的自定义class里面, 在extjs4.1的  Ext.define('Ext.dd.DragZone' ...的定义中 有 afterRepair : function(){ var me = this;

qt学习笔记(五) QGraphicsPixmapItem与QGraphicsScene的编程实例 图标拖动渐变效果

应大家的要求,还是把完整的project文件贴出来,大家省点事:http://www.kuaipan.cn/file/id_48923272389086450.htm 先看看执行效果,我用的群创7寸屏,主机是mini2440,分辨率是800*480,程序写比較粗糙,但对刚開始学习的人还是有一点启示,大家一起进步. qt中提供了QGphicsView,QGraphicsScene,QGraphicsItem,QGraphicsPixmapItem是QGraphicsItem的子类 分辨创建它们的实

运用HTML5原生拖动事件(drag)实现拖动效果

拖动效果相信很多朋友都自己写过,不管你用原生JS还是Jquery要实现起来也很简单,但是今天我想介绍的是运用HTML5标准中定义的原生拖动事件实现拖动效果. 一.背景: 其实说是HTML5标准定义,其实最早在IE4中就有拖放功能的API,只是在IE4中,网页中只有两种对象可以拖放:图像和某些文本.并且在IE4中唯一有效的放置目标是文本框.到了IE5.5,拖放功能得到了扩展,让网页中的任何元素都可以拖放.最终HTML5以IE的实力为基础制定了拖放规范.FF3.5+,Safari3+和Chrome根

移动端图标拖动并获取移动后的坐标

这两天在做关于合同盖章的需求,要求在移动端能拖动章,并获取章的坐标.在网上也看了一些相关代码,最后整理出一份demo.整理的匆忙,代码仍存在bug,当第一次移动章手指抬起后,再次点击一下章,坐标将改变,这点后期仍待改进. $(function(){ var cirX=0;//圆心X横坐标 var cirY=0;//圆心Y纵坐标 var moveX=0;//移动中触点X横坐标 var moveY=0;//移动中触点Y纵坐标 var boxW=$(".box").width();//章宽

android Launcher hotseat上图标拖动事件触动的时间

将 LauncherApplication.java 中的 sLongPressTimeOut 值改大 原值为 300 可以将它改为 600或者合适的timeout 值

codeblocks基本配置(ubuntu平台下)

1.先把编译环境,C库.C++库和Boost库装好,如下: sudoapt-get install build-essential* 有可能安装 build-essential后gdb就已经安装过了   sudo apt-get installgdb 2. 在 Ubuntu 软件中心 中安装 Code::Blocks IDE 这里可以参考本博客的另一篇文章,从源码编译开始安装code::blocks 3. 安装 Code::Blocks 的调试组件 Valgrind用来探测内存泄露的: sudo

wpf,后台触发按钮点击以及拖动

触发按钮Click MouseButtonEventArgs args = new MouseButtonEventArgs(Mouse.PrimaryDevice, 0, MouseButton.Left); args.RoutedEvent = Button.ClickEvent; btnOkCommand.RaiseEvent(args); 触发按钮绑定的Command 需要添加UIAutomationProvider 引用 ButtonAutomationPeer bam = new B

原生 drag drop HTML5

drag事件( dragstart -- drag -- dragend ) 当按下鼠标开始drag一个可以拖动的对象时,触发dragstart事件,如果元素是不可拖动的话,会出现一个不可拖动的图标,圆环里面一条斜杠 dragstart事件触发以后,当你拖动元素,就会持续触发drag事件,直到你放开才触发dragend事件 放下(dragenter -- dragover -- dragleave/drop) 当拖动的元素进入一个有效的drop区域,就会马上触发dragenter事件,当拖着元素

Android长按及拖动事件探究

Android中长按拖动还是比较常见的.比如Launcher中的图标拖动及屏幕切换,ListView中item顺序的改变,新闻类App中新闻类别的顺序改变等.下面就这个事件做一下分析. 就目前而言,Android中实现长按事件响应有几种方式,包括: 设置View.OnLongClickListener监听器 通过GestureDetector.OnGestureListener间接获取长按事件 实现View.OnTouchListener,然后在回调中通过MotionEvent判断是否触发了长按