移动端拖拽js,在电脑端是不好用的啊,只能在移动端用,电脑端插件比较多
2016-12-29 11:52
337 查看
不按规矩来了
先上代码吧
/*
*author:kingflag
*mailbox:1362168862@qq.com
*2016-09-08
*/
$(function() {
/*移动端绑定事件*/
FastClick.attach(document.body);
var actionList = {
//测试
'test1': function(self) {
test1(self)
}
}
function setMove() {
var element = $('#floatdiv');
var ty = 0;
/* console.log($(window).height());
console.log($(window).width());这是获取可见范围的宽度个高度*/
element.on("touchmove", function(e) {
e.preventDefault();
var offset = $(this).offset();
var divwidth=$('#floatdiv').width();//获取div宽度
var divheight=$('#floatdiv').height();//获取div高度
var x = (e.originalEvent.changedTouches[0].clientX - divwidth/2 );//拖拽div时使触摸点在div中间,下面的和这个一样,只是一个控制X轴,一个控制Y轴
var y = (e.originalEvent.changedTouches[0].clientY - divheight/2 );
ty = e.originalEvent.changedTouches[0].clientY;
tl = e.originalEvent.changedTouches[0].clientY;
if (offset.top <= $(window).height() - 53 || offset.left <= $(window).width() - offset.width) {
element.css('top', y + 'px');
element.css('left', x + 'px');
} else {
element.css('top', y + 'px');
element.css('left', x + 'px');
}
e.stopPropagation();
return false;
});
element.on('touchend', function(e) { //touchend是触摸后执行的动作,我没做太多调整,有可能拖拽的div移出屏幕可见范围,移动的主要功能是touchmove
var offset = $(this).offset(); //touch是div超出可见范围后执行的动作,可以将div拉回可见范围
var h = ty + offset.height;
var l = offset.left + offset.width;
if (h > $(window).height()) {
var th = $(window).height() - offset.height - 100;
element.css('top', th + 'px');
} else if (offset.top < 0) {
element.css('top', '50px');
}
if (offset.left < 0) {
element.css('left', '0px');
} else if (l > $(window).width()) {
element.css('left', $(window).width() - offset.width + 'px');
}
});
}
setMove();
var $body = $(document)
/*绑定click事件*/
$body.on('click', '[data-action]', function() {
var actionName = $(this).data('action')
var action = actionList[actionName]
var self = this
if ($.isFunction(action))
action(self)
})
function test1(self) {
console.log("测试");
}
})
这部分是根据APIcloud改来直接用的,网上找一些插件,好像都不太能实现我需要的功能,我就找了这一部分代码改了一下,现在能拖动div了,但window.location.herf是不能跳转的,这个不知道为什么,需要跳转的在div外层包一个a超链接
先上代码吧
/*
*author:kingflag
*mailbox:1362168862@qq.com
*2016-09-08
*/
$(function() {
/*移动端绑定事件*/
FastClick.attach(document.body);
var actionList = {
//测试
'test1': function(self) {
test1(self)
}
}
function setMove() {
var element = $('#floatdiv');
var ty = 0;
/* console.log($(window).height());
console.log($(window).width());这是获取可见范围的宽度个高度*/
element.on("touchmove", function(e) {
e.preventDefault();
var offset = $(this).offset();
var divwidth=$('#floatdiv').width();//获取div宽度
var divheight=$('#floatdiv').height();//获取div高度
var x = (e.originalEvent.changedTouches[0].clientX - divwidth/2 );//拖拽div时使触摸点在div中间,下面的和这个一样,只是一个控制X轴,一个控制Y轴
var y = (e.originalEvent.changedTouches[0].clientY - divheight/2 );
ty = e.originalEvent.changedTouches[0].clientY;
tl = e.originalEvent.changedTouches[0].clientY;
if (offset.top <= $(window).height() - 53 || offset.left <= $(window).width() - offset.width) {
element.css('top', y + 'px');
element.css('left', x + 'px');
} else {
element.css('top', y + 'px');
element.css('left', x + 'px');
}
e.stopPropagation();
return false;
});
element.on('touchend', function(e) { //touchend是触摸后执行的动作,我没做太多调整,有可能拖拽的div移出屏幕可见范围,移动的主要功能是touchmove
var offset = $(this).offset(); //touch是div超出可见范围后执行的动作,可以将div拉回可见范围
var h = ty + offset.height;
var l = offset.left + offset.width;
if (h > $(window).height()) {
var th = $(window).height() - offset.height - 100;
element.css('top', th + 'px');
} else if (offset.top < 0) {
element.css('top', '50px');
}
if (offset.left < 0) {
element.css('left', '0px');
} else if (l > $(window).width()) {
element.css('left', $(window).width() - offset.width + 'px');
}
});
}
setMove();
var $body = $(document)
/*绑定click事件*/
$body.on('click', '[data-action]', function() {
var actionName = $(this).data('action')
var action = actionList[actionName]
var self = this
if ($.isFunction(action))
action(self)
})
function test1(self) {
console.log("测试");
}
})
这部分是根据APIcloud改来直接用的,网上找一些插件,好像都不太能实现我需要的功能,我就找了这一部分代码改了一下,现在能拖动div了,但window.location.herf是不能跳转的,这个不知道为什么,需要跳转的在div外层包一个a超链接
相关文章推荐
- JS插件网站 JS地图缩放等 比较实用 http://www.netzgesta.de
- gridster.js–可拖拽的网格插件
- JavaScript 文件拖拽上传插件 dropzone.js 学习总结。
- JS拖拽插件实现步骤
- JS拖拽插件实现步骤
- Pc端和移动端拖拽组件jquery.drag.js
- [JS插件] fullPage:适合移动端web整屏滚动组件
- 移动端的触摸裁剪图片js插件
- 前端拖拽插件gridster.js
- jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
- 比较优秀的两款JS图表统计插件
- Firefox 插件 JSview是一套比较实用的JS,CSS文件查看工具,很方便,很快捷地查看页面引用了哪些文件,作为Web前端开发者是一套必备的插件,由于Firefox升级过快,插件很快不兼容了,这里对插件做了一些调整,可以兼容最新Firefox浏览器(目前FireFox 21)
- 几款JS地图插件比较
- 一个比较轻巧好用的js分页插件,可ajax可url
- 移动端 触摸手势js插件分享
- js 时间日期 校验格式 比较大小等(判断页面选择时间只能在早8点到晚8点之间)
- 几款JS地图插件比较
- div拖拽插件——JQ.MoveBox.js(JQ插件学习)
- JavaScript 文件拖拽上传插件 dropzone.js 介绍
- swiper:前应用较广泛的移动端网页触摸内容滑动js插件