jquery如何设置拖动的活动范围

jquery的拖动函数有个参数控制这个，有很多活动范围可选择，如下：

1containment:

[类型]选择器, 元素, 字符串, 数组

选择器: 只能在选择器约束的元素内拖动

元素: 只能在给定的元素内拖动

2字符串:

parent: 只能在父容器内拖动

document: 在当前html文档的document下可拖动, 超出浏览器窗口范围时, 自动出现滚动条

widow: 只能在当前浏览器窗口的内容区域拖动, 拖动超出当前窗口范围, 不会导致出现滚动条

3数组: [x1, y1, x2, y2]以[开始水平坐标, 开始垂直坐标, 结束水平坐标, 结束垂直坐标]的方式划定一个区域, 只能在此区域内拖动 这种方式指定时, 值是相对当前浏览器窗口内容区域左上角的偏移值

false: 不限制拖动的活动范围

[默认值]false

[产生影响]

影响指定可拖动控件的活动区域

[代码示例]

[初始化]

$('selector')draggable({ containment: 'parent' });

[获取属性值]

var containment = $('selector')draggable('option', 'containment');

[设置属性值]

$('selector')draggable('option', 'containment', 'parent');

此方法限制太多，可能

svg使用d3绘制，并且抽象出svg中所有元素的一个参照点和缩放比例

svg元素不会太多，否则会造成卡顿。

最近有个项目需要我帮一下前端，主要是使用d3绘制svg放在页面，其中有一个功能就是对绘制的svg进行拖动和缩放，有点像地图。

这里我已经写好了一个方法来绘制svg

其中svg是要绘制的元素，data是要绘制的数据，x，y是svg的中心坐标，svgA是父元素的边长，来控制svg（正方形）刚好在父元素内，radio是缩放比例

实现方式是<font color='red'>重绘</font>，所以元素太多会造成卡顿。

一、拖拽

我们来分析拖拽的过程，鼠标按下---->鼠标移动------>松开鼠标。对应的事件分别是mousedown、mousemove、mouseup，先定义两个全局变量

鼠标按下事件

鼠标移动事件

最后放开鼠标

一个问题，毋庸置疑这三个事件都注册在svg元素（或者与svg等大的父元素）上，但是当鼠标拖到svg外面时，在svg外面放开了鼠标，鼠标回到svg中，图形会随着鼠标移动，这样是不应该的，所以应该把最后一个事件mouseup注册到最外面的元素上，那么鼠标在svg外放开也可以触发。

二、缩放

缩放的实现和拖拽类似，相同的就不赘述了。

缩放是根据鼠标滚轮的事件触发，但是鼠标滚轮有他的默认事件，那就是页面滚动，这里要阻止它。

对于缩放，我是想做对于鼠标位置放大和缩小，这里要获取到鼠标相对于父元素的坐标（具体做法可以参考上篇文章），保证鼠标放在的那一点相对于父元素的坐标（后都称绝对坐标）不变，再计算中心坐标的偏移量，一开始我是使用矩阵的坐标变换做的，计算量很大，结果显示并不如预期，并且当时矩阵坐标变换也学的不好，我怀疑是算错了，然后突然想到向量，发现用向量的话计算量大大降低，结果显示还是一样。最后还是做的关于中心坐标（包括拖拽后的）的缩放。

对于没能将图形在鼠标位置放大缩小的原因，我认为是做法有问题，项目中的svg图形是以中心点开始向外发散绘制的，所以不应该是鼠标那一点绝对坐标不变，而应该是鼠标所在的元素组的参考点绝对坐标不变。但是实现起来太麻烦，另外如果鼠标没有在任何一个元素组也不好处理，所以干脆以中心坐标不变吧。

另外，此方法简单粗暴，但用处并不太大，只做对拖拽和缩放的理解使用。

最尴尬的是在写这篇博客的时候我看到了一篇文章，让我知道了有 transform ，汗呐！！！

>

new出这个窗体的时候，获取主窗体的坐标，thisLocationX，thisLocationY;

当新窗体show之后，你说可以移动，没问题的，有一个locationChanged事件，这时把新窗体的坐标获取出来就可以了，再和之前主窗体的坐标可以比较了。

效果如图

鼠标拖动效果

参考代码如下

import javafxapplicationApplication;

import javafxsceneScene;

import javafxscenelayoutPane;

import javafxscenelayoutRegion;

import javafxstageStage;

public class TestDraggedApp extends Application {

  //保存鼠标点击在组件上的位置

  private  double offsetX,offsetY;

  @Override

  public void start(Stage primaryStage) {

      Pane root = new Pane();

      Region region = new Region();

      regionsetStyle("-fx-background-color: #75c0ff;-fx-pref-width: 100;-fx-pref-height: 50");

      rootgetChildren()add(region);

      primaryStagesetScene(new Scene(root, 500, 320));

      primaryStagesetTitle("TestDraggedApp");

      primaryStageshow();

      //设置鼠标按下事件

      regionsetOnMousePressed(event -> {

          //记录鼠标点击在组件上的位置

          offsetX = eventgetX();

          offsetY = eventgetY();

      });

      //设置鼠标拖动事件

      regionsetOnMouseDragged(event -> {

          //设置新的位置

          double layoutX = eventgetSceneX() - offsetX;

          regionsetLayoutX(layoutX);

          double layoutY = eventgetSceneY() - offsetY;

          regionsetLayoutY(layoutY);

      });

  }

  public static void main(String[] args) {

      launch(args);

  }

}

以上就是关于jquery如何设置拖动的活动范围全部的内容，包括:jquery如何设置拖动的活动范围、简单实现svg的拖拽和缩放、C# 请问如何获取当前窗体（可以拖动）的位置，从而去确定它所调用的窗体之间的相对位置。等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！