怎么使用vuedraggable实现简单的拖拽，只拖拽一个内容（div） jquery如何设置拖动的活动范围
怎么使用vuedraggable实现简单的拖拽，只拖拽一个内容（div）
仔细观察发现，今日头条导航部分编辑效果，有以下几个效果
1：点击编辑开启可以编辑的效果（也就是是否开启拖拽）
2：拖拽前选中效果
3：拖动过程中元素移动到目标位置的运动效果
这是Vue.Draggable作者的git引入之后我们发现Vue.Draggable默认就是开启拖拽状态的，那我们要控制这个状态怎么办呢？在作者项目的首页，发现并没有详细介绍，是不是有这个状态提供，当然也许是因为自己英语太渣，没有发现这句话（See here for reference）
https://www.jsykyy.com/#RubaXa/Sortable#event-object-demo后来发现，点进去，发现了很多好玩的东西，具体有哪些，这里我们只挑我们需要的，然后我就发现这个东东：
这不就是我们想要的么，如果你认为是这个属性直绑定到组件上，那么你就错了，在往下看，似乎有怎么使用的实例代码，那我们不妨看看是怎么样的：
其实看到这个你大概知道怎么用了，如果还不会那么不着急，我贴一下我的代码你就知道怎用了
嗯就是这么简单，然后你再去控制这个disable就可以，至于怎么控制，接触过vue的人应该都会，就不说了，到这里我们第一个问题就解决，那我后面两个问题呢？
别急，其实和第一个一模一样
还有一些其他配置项的解释：
1.ghostClass:ghostClass拖拽中占位的元素的类名（一般设置opacity:1）达到空出该位置的视觉效果
2.dragClass:dragClass元素拖拽中的类名
哈哈就是这么简单，惊不惊喜，意不意外！！！之前之所以，称之为问题是因为，以为那些配置项都是直接配置在组件上的，好了上面三个问题基本算是解决了，其实我们发现，这个过程中烦在哪里，就是知道配置项options是挂在在draggable组件上，那些控制draggable的行为都是在options里面配置的，经验告诉我们，一定要仔细阅读文档，答案都在文档里面，好了，如果能帮助到正在看文章的你
jquery如何设置拖动的活动范围
jquery的拖动函数有个参数控制这个，有很多活动范围可选择，如下：
containment:
[类型]选择器, 元素, 字符串, 数组.
选择器: 只能在选择器约束的元素内拖动
元素: 只能在给定的元素内拖动
字符串:
parent: 只能在父容器内拖动
document: 在当前html文档的document下可拖动, 超出浏览器窗口范围时, 自动出现滚动条
widow: 只能在当前浏览器窗口的内容区域拖动, 拖动超出当前窗口范围, 不会导致出现滚动条...
数组: [x1, y1, x2, y2]以[开始水平坐标, 开始垂直坐标, 结束水平坐标, 结束垂直坐标]的方式划定一个区域, 只能在此区域内拖动. 这种方式指定时, 值是相对当前浏览器窗口内容区域左上角的偏移值.
false: 不限制拖动的活动范围
[默认值]false
[产生影响]
影响指定可拖动控件的活动区域.
[代码示例]
[初始化]
$(.selector).draggable({ containment: parent })
[获取属性值]
var containment = $(.selector).draggable(option, containment)
[设置属性值]
$(.selector).draggable(option, containment, parent)
应该能理解吧
jQuery UI 的拖拽范围问题
可以在开始的时候设置containment。
$(function() {
$( "#draggable5" ).draggable({
containment:[x1,y1,x2,y2]
})
})
x1,y1,x2,y2变化的时候调用
$( "#draggable5" ).draggable("option", "containment", [x1,y1,x2,y2])
jquery ui draggable拖拽元素
jqueryUI的拖拽提供了三个事件。开始拖动前，拖动中，拖动放下。
你所说的 "当两个div有重叠的部分，拖拽的div就还原会原来的位置"，任何一个框架都不会帮你实现。因为这个要求的位置太精确了。任何框架都不可能帮你实现。因为拖动对象的尺寸边框，都是未知的。无规矩可寻。目前的拖动事件，鼠标事件。浏览器实现的机制都是以鼠标位置为判断的。而如果你要实现的话，你需要：1 个容器。 2 精确计算每个被拖动div的尺寸和当前鼠标相对于容器的坐标。 3 拖动中事件不断的进行位置判断。即在drag事件中判断。
比如：
假设你现在拖动div2，你想要实现，当拖动过程中。div2碰到div1的时候。就让div2回到原来的位置。
那么最关键的一点是。你在drag事件中必须要不断的计算，div2位置是否和div1位置重合。
计算是否重合的思路就是：将尺寸对比，转化成二维坐标对比。计算出div1的初始静态坐标。
根据鼠标当前相对于容器的坐标和div2的尺寸，计算出div2四个边缘的动态坐标。再和div1的坐标对比。
网页中如何用jquery中draggable实现拖拽Demo
在jquery里可以直接用isNaN()，因为他是JavaScript的类库。是由JavaScript语言写的。
例如：
$(document).ready(function(){
alert(isNaN($(#id).val()))
})
</script>可以直接使用