ZK集成jqueryui 实现图片鼠标滚轮缩放以及拖拽位置

最新推荐文章于 2023-04-07 17:24:15 发布

Vincent2013SH

最新推荐文章于 2023-04-07 17:24:15 发布

阅读量1.3k

点赞数 1

本文链接：https://blog.csdn.net/daquan198163/article/details/53510260

版权

//@off    image是一个zul中 的image组件
				image.setWidgetOverride("bind_", "function(){\r\n"+
					      "this.$supers('bind_', arguments);\r\n"+
					      "var node = this.$n();\r\n"+
					      "if (node.addEventListener)\r\n"+ 
					      "    node.addEventListener('DOMMouseScroll', this.proxy(this.onMouseWheel), false);\r\n"+
					      "node.onmousewheel = this.proxy(this.onMouseWheel);\r\n"+
					      "}");

				String script = "function(event){\r\n" + 
				  "    var delta = 0;\r\n" + 
				  "    if (!event) /* For IE. */ \r\n" + 
				  "        event = window.event;\r\n" + 
				  "    if (event.wheelDelta) { /* IE/Opera. */\r\n" + 
				  "        delta = event.wheelDelta / 120;\r\n" + 
				  "        if (window.opera) \r\n" + 
				  "            delta = -delta;\r\n" + 
				  "    }\r\n" + 
				  "    else \r\n" + 
				  "        if (event.detail) {\r\n" + 
				  "            delta = -event.detail / 3;\r\n" + 
				  "        }\r\n" + 
				  "    if (delta) {\r\n" + 
				  "        console.log('delta = ' + delta); " +
				  "       var style= jq('#"+image.getUuid()+"').attr('style'); \r\n" +
				  "       var zoom=100;  \r\n" +
				  "       if(style.indexOf('zoom')<0){  \r\n" +
				  "           \r\n" +
				  "       }else{ \r\n" +
				  "           zoom=parseInt(style.substring(style.indexOf('zoom:')+5,style.indexOf('%')));\r\n" +
				  "           style=style.substring(0,style.indexOf('zoom'));\r\n" +
				  "       } \r\n" +
				  "        if(delta>0){ \r\n" +
				  "          zoom+=20; \r\n" +
				  "        }else{ \r\n" +
				  "          zoom-=10; \r\n" +
				  "        }\r\n" +
				  "         jq('#"+image.getUuid()+"').attr('style',style+'zoom:'+zoom+'%;');  \r\n" +
				  "    }\r\n" + 
				  "    if (event.preventDefault) \r\n" + 
				  "        event.preventDefault();\r\n" + 
				  "    event.returnValue = false;\r\n" + 
				  "}    ";
				image.setWidgetOverride("onMouseWheel", script);
				
				Clients.evalJavaScript("jq('#"+image.getUuid()+"').draggable();");//https://jqueryui.com/draggable/
//@on

最后，在zul页面中引入jqueryui（拖拽功能）： <script type="text/javascript" src="/jqueryui1121/jquery-ui.min.js" />