移动端拖动div

Html

Css

注意，请下载后在模拟移动端浏览器预览，或直接在移动端预览，PC端无效果

#test {
	position:fixed;
	width:60px;
	height:60px;
	background:url("http://www.jq22.com/img/cs/500x500-1.png") no-repeat;
	background-size:100% 100%;
	right:10px;
	top:150px;
	z-index:5;
	border:1px solid #dcdcdc;
}

//div视野拖拽
function moveDivs(_id) {
    var _block = document.getElementById(_id);
    var _init_left, _init_top, _div_top, _div_left, _box_width, _box_heiht;
    var _win_height = $(window).height();
    var _win_width = $(window).width();

_block.addEventListener('touchstart', function(e) {
        _init_left = parseInt(e.touches[0].clientX);
        _init_top = parseInt(e.touches[0].clientY);
        _div_top = $("#" + _id).offset().top - $(window).scrollTop();
        _div_left = $("#" + _id).offset().left;
        _box_width = $("#" + _id).width();
        _box_heiht = $("#" + _id).height();
    });

_block.addEventListener('touchmove', function(e) {
        e.preventDefault();
        var _left = parseInt(e.touches[0].clientX);
        var _top = parseInt(e.touches[0].clientY);

var _need_left = _div_left + (_left - _init_left);
        var _need_top = _div_top + (_top - _init_top);

//检测_block是否还存在可视区域
        var _max_left = _win_width - _box_width;
        var _max_top = _win_height - _box_heiht;

if (_need_left < 0) _need_left = 0;
        if (_need_left > _max_left) _need_left = _max_left;
        if (_need_top < 0) _need_top = 0;
        if (_need_top > _max_top) _need_top = _max_top;

$('#' + _id).css({
            'top': _need_top + 'px',
            'left': _need_left + 'px',
        })

});

_block.addEventListener('touchend', function(e) {

});
}

moveDivs("test"); //传入容器ID就可以

↑上面代码改变，会自动显示代码结果 jQuery调用版本：2.1.1

立即下载

移动端拖动div

代码描述：移动端经常因为广告遮挡部分重要内容，何不加一个手势拖动呢？

movedivs("test"); //传入容器id就可以
如果你有更好的建议或者意见，欢迎提出 33578191@qq.com

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

?Zz

相关代码

注意，请下载后在模拟移动端浏览器预览，或直接在移动端预览，PC端无效果

移动端拖动div

最新