Fatal编程技术网
  • javascript/
  • Javascript 在缩放的div上拖动元素

Javascript 在缩放的div上拖动元素

javascript jquery jquery-ui

Javascript 在缩放的div上拖动元素,javascript,jquery,jquery-ui,jquery-ui-draggable,Javascript,Jquery,Jquery Ui,Jquery Ui Draggable,我尝试过使用jquery的内置拖动功能，也尝试过使用自定义拖动功能，但都没有效果。两者都有值得尊重的问题，我将努力强调这两个问题 基本上，我尝试允许拖动缩放div容器上的元素。以下方法适用于小于约2的缩放图元。但如果你再高一点，我们就会看到一些问题 任何帮助都将不胜感激。谢谢你抽出时间 HTML <div id="container"> <div id="dragme">Hi</div> </div> 这里提到了一个类似的问题： 问题似乎

我尝试过使用jquery的内置拖动功能，也尝试过使用自定义拖动功能，但都没有效果。两者都有值得尊重的问题，我将努力强调这两个问题

基本上，我尝试允许拖动缩放div容器上的元素。以下方法适用于小于约
2
的缩放图元。但如果你再高一点，我们就会看到一些问题

任何帮助都将不胜感激。谢谢你抽出时间

HTML

<div id="container">
    <div id="dragme">Hi</div>
</div>
这里提到了一个类似的问题：

问题似乎源于jQuery无法返回缩放元素的精确大小，因此无法为元素设置正确的偏移值

为了解决这个问题，他建议首先将比例设置为1，然后设置偏移量，然后再次重置比例值

但单凭这一点并不能解决这里的问题。由于鼠标位置是在缩放时获取的，因此位置值也应除以缩放值

以下是代码的编辑版本：

  var scl = 2.5;
  var
    drg_h = $drag.outerHeight(),
    drg_w = $drag.outerWidth(),
    pos_y = $drag.offset().top/scl + drg_h - e.pageY/scl,
    pos_x = $drag.offset().left/scl + drg_w - e.pageX/scl;

  follow = function(e) {
    var size = {
      top:e.pageY/scl + pos_y - drg_h+scl*2,
      left:e.pageX/scl + pos_x - drg_w+scl*2
    };
      $drag.parent().css("transform","scale(1)");
      $drag.offset(size);
      $drag.parent().css("transform","scale("+scl+")");
  };
注意：我只替换了
transform
标记的比例值，因为我使用的是chrome。也可以替换所有实例，或者使用具有1个比例值的不同类

JSFIDLE也是。

然而，在prue dom中，这里有一个简单的缩放拖动示例

<style>
#dragme {
    position:absolute;
    border:1px solid red;
    background:pink;
    left:10px;
    top:20px;
    width:100px;
    height:200px;
}
#container {
    transform: scale(2,2) translate(100px,100px);
    position:relative;
    border:1px solid green;
    background:grey;
    width:200px;
    height:300px;
}
</style>
<body>

<div id="container">
    <div id="dragme">Hi</div>
</div>


    <script>
    var dragme=document.getElementById("dragme");
    var container=document.getElementById("container");
    dragme.onmousedown=function Drag(e){
        this.ini_X = this.offsetLeft-e.clientX/2;
        this.ini_Y = this.offsetTop-e.clientY/2;
        container.onmousemove = move;
        container.onmouseup = release;
      return false;
    }
    function move(e){
        e.target.style.left = e.clientX/2 + e.target.ini_X + 'px';
        e.target.style.top = e.clientY/2 + e.target.ini_Y + 'px';
    }
    function release(){
        container.onmousemove=container.onmouseup=null;
}

    </script>
    </body>


#德拉格姆{
位置：绝对位置；
边框：1px纯红；
背景：粉红色；
左：10px；
顶部：20px；
宽度：100px；
高度：200px；
}
#容器{
变换：缩放（2,2）平移（100px，100px）；
位置：相对位置；
边框：1px纯绿色；
背景：灰色；
宽度：200px；
高度：300px；
}
你好
var dragme=document.getElementById（“dragme”）；
var container=document.getElementById（“容器”）；
dragme.onmousedown=函数拖动（e）{
this.ini_X=this.offsetLeft-e.clientX/2；
this.ini_Y=this.offsetTop-e.clientY/2；
container.onmousemove=移动；
container.onmouseup=释放；
返回false；
}
功能移动（e）{
e、 target.style.left=e.clientX/2+e.target.ini_X+'px'；
e、 target.style.top=e.clientY/2+e.target.ini_Y+'px'；
}
函数释放（）{
container.onmousemove=container.onmouseup=null；
}
以下是我的一些发现，以确保在缩放容器上拖动适用于方法一。唯一需要注意的是，在执行任何这些操作之前，请确保已声明的比例百分比为
var percent

首先，在javascript的顶部使用此代码。这将有助于确保可放置区域与囊状容器一起工作

$.ui.ddmanager.prepareOffsets = function( t, event ) { var i, j, m = $.ui.ddmanager.droppables[ t.options.scope ] || [], type = event ? event.type : null, list = ( t.currentItem || t.element ).find( ":data(ui-droppable)" ).addBack(); droppablesLoop: for ( i = 0; i < m.length; i++ ) { if ( m[ i ].options.disabled || ( t && !m[ i ].accept.call( m[ i ].element[ 0 ], ( t.currentItem || t.element ) ) ) ) { continue; } for ( j = 0; j < list.length; j++ ) { if ( list[ j ] === m[ i ].element[ 0 ] ) { m[ i ].proportions().height = 0; continue droppablesLoop; }  } m[ i ].visible = m[ i ].element.css( "display" ) !== "none"; if ( !m[ i ].visible ) { continue; } if ( type === "mousedown" ) { m[ i ]._activate.call( m[ i ], event ); } m[ i ].offset = m[ i ].element.offset(); m[ i ].proportions({ width: m[ i ].element[ 0 ].offsetWidth * percent, height: m[ i ].element[ 0 ].offsetHeight * percent }); } };
如果要在缩放容器上启用可调整大小的元素，则需要此选项

function dragFix(event, ui) { var changeLeft = ui.position.left - ui.originalPosition.left, newLeft = ui.originalPosition.left + changeLeft / percent, changeTop = ui.position.top - ui.originalPosition.top, newTop = ui.originalPosition.top + changeTop / percent; ui.position.left = newLeft; ui.position.top = newTop; }

function startFix(event, ui) { ui.position.left = 0; ui.position.top = 0;  var element = $(this); }

function resizeFix(event, ui) { var changeWidth = ui.size.width - ui.originalSize.width, newWidth = ui.originalSize.width + changeWidth / percent, changeHeight = ui.size.height - ui.originalSize.height, newHeight = ui.originalSize.height + changeHeight / percent;  ui.size.width = newWidth; ui.size.height = newHeight; }
为了使元素可拖动，我使用以下函数

$("ELEMENT").resizable({ minWidth: - ($(this).width()) * 10, minHeight: - ($(this).height()) * 10, resize: resizeFix, start: startFix });
$("ELEMENT").draggable({ cursor: "move", start: startFix, drag: dragFix }); }
您是否正在尝试创建自定义拖动功能？jQueryUI已经有了一个可拖动的函数。我用几个缩放的条目测试了您的代码。它似乎一旦达到1.75左右，就会像你建议的那样开始闪烁和跳跃。下面的任何内容看起来都很好。我还冒昧地更新了您的JSFIDLE，以便您可以跟踪位置和大小。我会尝试更多的东西，但我认为这可能是一个浏览器相关的问题。检查这个答案哇，这是伟大的工作！谢谢你。我有一个想法，我一直在努力让这项工作下。我知道这不是我想要问的问题，但我想知道你是否介意看一看，看看我能做些什么，让它在这种缩放环境下工作，它的父对象不是被缩放的对象。我稍微编辑了一下，效果稍微好一点，但还是有点远程传送。它似乎与边距和填充值有关，因为它们也被用于光标位置的计算。为了快速检查，我添加了以下css:
body、.trimSpace、.formContainer、#formBox{margin:0px！important；padding:0px！important；}
并且运行得很好。嗯，我想这不是一个简单的方法。从我的问题中，你可以看出这不是我想要的答案，但即使如此，你甚至没有努力告诉我如何在缩放容器上实现这一点。div在缩放容器中移动，缩放容器在x和y坐标中的缩放比例为2。该示例在IE11、Firefox和Chrome中的任何规模都能很好地工作。事实上，这很简单，如果父对象缩放，比如说m，拖动目标的移动，这里我使用e.clientX来测量，应该除以m。这很完美。非常感谢。 
function resizeFix(event, ui) { var changeWidth = ui.size.width - ui.originalSize.width, newWidth = ui.originalSize.width + changeWidth / percent, changeHeight = ui.size.height - ui.originalSize.height, newHeight = ui.originalSize.height + changeHeight / percent;  ui.size.width = newWidth; ui.size.height = newHeight; }

$("ELEMENT").resizable({ minWidth: - ($(this).width()) * 10, minHeight: - ($(this).height()) * 10, resize: resizeFix, start: startFix });
$("ELEMENT").draggable({ cursor: "move", start: startFix, drag: dragFix }); }