大佬教程收集整理的这篇文章主要介绍了javascript – 如何获取JqueryUI可以使用缩放/缩放 – 鼠标移动进行排序,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
http://jsfiddle.net/TqUeS/660/
var zoom = $('#canvas').css('zoom'); var canvasHeight = $('#canvas').height(); var canvasWidth = $('#canvas').width(); $('.dragme').draggable({ drag: function(evt,ui) { // zoom fix ui.position.top = Math.round(ui.position.top / zoom); ui.position.left = Math.round(ui.position.left / zoom); // don't let draggable to get outside of the canvas if (ui.position.left < 0) ui.position.left = 0; if (ui.position.left + $(this).width() > canvasWidth) ui.position.left = canvasWidth - $(this).width(); if (ui.position.top < 0) ui.position.top = 0; if (ui.position.top + $(this).height() > canvasHeight) ui.position.top = canvasHeight - $(this).height(); } });
我希望Drag事件可以在Sortable版本的Sort事件中被替换,但是从下面的小提琴中可以看出它不起作用.在sort事件中设置ui.position没有任何效果 – 似乎在事件触发后设置它并丢弃它.
http://jsfiddle.net/TqUeS/658/
var zoom = $('#canvas').css('zoom'); var canvasHeight = $('#canvas').height(); var canvasWidth = $('#canvas').width(); $('#canvas').sortable({ items: "div",sort: function(evt,ui) { // zoom fix ui.position.top = Math.round(ui.position.top / zoom); ui.position.left = Math.round(ui.position.left / zoom); // don't let draggable to get outside of the canvas if (ui.position.left < 0) ui.position.left = 0; if (ui.position.left + $(this).width() > canvasWidth) ui.position.left = canvasWidth - $(this).width(); if (ui.position.top < 0) ui.position.top = 0; if (ui.position.top + $(this).height() > canvasHeight) ui.position.top = canvasHeight - $(this).height(); } });
如果有人有其他解决方法,我很乐意听到.
对于可拖动,拖动ui.position,它指出:
对于Sortable,对于ui.position,它指出:
尝试这个:
示例:http://jsfiddle.net/Twisty/4nv60ob9/2/
HTML
<div id="canvas" data-zoom="0.5"> <div class="dragme"></div> <div class="dragme"></div> <div class="dragme"></div> </div> <div id="report"></div>
JavaScript的
var zoom = $("#canvas").data("zoom"); console.log(typeof zoom,zoom.toString()); var canvasHeight = $('#canvas').height(); var canvasWidth = $('#canvas').width(); $('#canvas').sortable({ items: "div",start: function(e,ui) { console.log("Sort Start triggered"); },ui) { console.log("Sort triggered"); // zoom fix ui.position.top = Math.round(ui.position.top / zoom); ui.position.left = Math.round(ui.position.left / zoom); $("#report").html("Top: " + ui.position.top + " Left: " + ui.position.left); // don't let draggable to get outside of the canvas if (ui.position.left < 0) { ui.Helper.css("left",0); } if (ui.position.left + ui.Helper.width() > canvasWidth) { ui.Helper.css("left",(canvasWidth - ui.Helper.width()) + "px"); } if (ui.position.top < 0) { ui.Helper.css("top",0); } if (ui.position.top + ui.Helper.height() > canvasHeight) { ui.Helper.css("top",(canvasHeight - ui.Helper.height()) + "px"); } $("#report").html("Top: " + (canvasHeight - ui.Helper.height()) + " Left: " + (canvasWidth - ui.Helper.width())); } });
我认为这是以同样的方式工作的.
以上是大佬教程为你收集整理的javascript – 如何获取JqueryUI可以使用缩放/缩放 – 鼠标移动进行排序全部内容,希望文章能够帮你解决javascript – 如何获取JqueryUI可以使用缩放/缩放 – 鼠标移动进行排序所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。