这是我的代码:
HTML
<div id="canvas"> <div id="dragme"></div> </div>
CSS
#canvas { width:500px; height:250px; border:1px solid #444; zoom:0.7; } #dragme { width:100px; height:50px; background:#f30; }
JS
$(function(){ $('#dragme').draggable({containment:'parent'}) })
使用css缩放属性时,我有一个主要问题.目标draggable div的位置与光标位置不协调.
有没有干净简单的解决方案?我应该能够动态地改变缩放.
解决方法
您不需要设置缩放属性.我只是将差异添加到由于缩放属性而导致的draggable的位置.希望它有帮助.
小提琴
JS
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(); } });
原文地址:https://www.jb51.cc/jquery/176638.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。