验证中...
私信发送成功
语言: JavaScript
分类: JavaScript 工具
最后更新于 2017-11-14 18:37
gistfile1.txt
原始数据 复制代码
// 定义鼠标抬起的事件流,事件发生在移动对象dragTargets上
var mouseup = Rx.Observable.fromEvent(dragTargets, 'mouseup');
// 定义鼠标移动的事件流,事件发生在document上
var mousemove = Rx.Observable.fromEvent(document, 'mousemove');
// 定义鼠标按下的事件流,事件发生在移动对象dragTargets上
var mousedown = Rx.Observable.fromEvent(dragTargets, 'mousedown');
// 转换操作,鼠标按下事件发生的时候,将事件流转换成跟踪鼠标移动事件流
var mousedrag = mousedown.flatMap(function (md) {
// 计算移动开始时候元素的位置
var startX = md.offsetX, startY = md.offsetY;
// 真正的转换开始
return mousemove.map(function (mm) {
mm.preventDefault();
// 事件里面的值,即最后订阅者可以操作的数据
return {
left: mm.clientX - startX,
top: mm.clientY - startY,
target: mm.target,
};
// 直到鼠标抬起事件发生的时候整个事件流结束
}).takeUntil(mouseup);
});
// 订阅者的操作,简单的将元素的style修改即可
var subscription = mousedrag.subscribe(function (d) {
d.target.style.top = d.top + 'px';
d.target.style.left = d.left + 'px';
});

评论列表( 0 )

你可以在登录后,对此项目发表评论