jq 拖拽练习

4人阅读 评论(0) 收藏 举报
分类:


不带有click

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习 拖拽高级</title>
    <style>
              *{
  margin:0;
  padding:0;
  list-style:none;}
.outer{
height:350px;
width:350px;
background-color:grey;
position:relative;
left:100px;
top:100px;
background:url(images2/xiaotu.jpg) no-repeat;
border:1px solid;}
.box{
height:120px;
width:120px;
background-color:pink;
position:absolute;
opacity:0.5;
}
.show{
height:400px;
width:400px;
border:1px solid;
position:absolute;
left:500px;
top:100px;
background:url(images2/datu.jpg) no-repeat;
}
.hide{
display:none;}
    </style>
     <script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<div class="outer">
    <div class="box hide">
        
        </div>
      
    </div>
      <div class="show hide">
        
        </div>
    <script>
$(document).ready(function(e) {
//鼠标离开时候,隐藏box
$(".outer").mouseout(function(){
$(".box,.show").addClass("hide");
}
);
//鼠标 在window中移动  div跟随移动
$(".outer").mousemove(function(e){
$(".box,.show").removeClass("hide");
var boxX=e.pageX-$(".outer").offset().left-60;
var boxY=e.pageY-$(".outer").offset().top-60;
//盒子不出边框
if(e.pageX<$(".outer").offset().left+60){
boxX=0;
}

if(e.pageX>$(".outer").offset().left-60+$(".outer").outerWidth()){
console.log("gt");
boxX=$(".outer").outerWidth()-120;
}
if(e.pageY>$(".outer").offset().top-60+$(".outer").outerHeight()){
boxY=$(".outer").outerHeight()-120;
}
if(e.pageY<$(".outer").offset().top+60){
boxY=0;
}
//鼠标的move事件中改变 box位置
$(".box").css({
"left":boxX,
"top":boxY
});
//鼠标移动改变 show中图片的位置
var showX=-boxX*800/350;
var showY=-boxY*800/350;
console.log("showx"+showX);
$(".show").css({"background-position":showX+"px "+showY+"px"});

});
        });
    </script>
</body>
</html>

带有click的拖拽

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习 拖拽高级</title>
    <style>
              *{
  margin:0;
  padding:0;
  list-style:none;}
.outer{
height:350px;
width:350px;
background-color:grey;
position:relative;
left:100px;
top:100px;
background:url(images2/xiaotu.jpg) no-repeat;
border:1px solid;}
.box{
height:120px;
width:120px;
background-color:pink;
position:absolute;
opacity:0.5;
}
.show{
height:400px;
width:400px;
border:1px solid;
position:absolute;
left:500px;
top:100px;
background:url(images2/datu.jpg) no-repeat;
}
    </style>
     <script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<div class="outer">
    <div class="box">
        
        </div>
      
    </div>
      <div class="show">
        
        </div>
    <script>
$(document).ready(function(e) {
//存储鼠标的状态
            var isClick=false;
//鼠标在 div mousedown的时候变为true
$(".box").mousedown(function(){
isClick=true;
console.log(isClick);
});
//鼠标松开 变为 false  注意此处是在 window 中
$(window).mouseup(function(){
isClick=false;
console.log(isClick);
});
//鼠标 在window中移动  div跟随移动
$(window).mousemove(function(e){
if(isClick){
var boxX=e.pageX-$(".outer").offset().left-60;
var boxY=e.pageY-$(".outer").offset().top-60;
//盒子不出边框
if(e.pageX<$(".outer").offset().left+60){
boxX=0;
}

if(e.pageX>$(".outer").offset().left-60+$(".outer").outerWidth()){
console.log("gt");
boxX=$(".outer").outerWidth()-120;
}
if(e.pageY>$(".outer").offset().top-60+$(".outer").outerHeight()){
boxY=$(".outer").outerHeight()-120;
}
if(e.pageY<$(".outer").offset().top+60){
boxY=0;
}
//鼠标的move事件中改变 box位置
$(".box").css({
"left":boxX,
"top":boxY
});
//鼠标移动改变 show中图片的位置
var showX=-boxX*800/350;
var showY=-boxY*800/350;
console.log("showx"+showX);
$(".show").css({"background-position":showX+"px "+showY+"px"});
}
});
        });
    </script>
</body>
</html>
查看评论

jq拖拽

  • 2014年04月29日 13:12
  • 3.44MB
  • 下载

jq拖拽(支持双击事件和拖拽)

  • 2015年01月05日 17:01
  • 203KB
  • 下载

jq实现简单的拖拽效果

直接copy下来,应该可以用! 拖拽代码如下: $(".obj_drag").on({ mousedown: function(e){ var el=$...
  • baidu_31333625
  • baidu_31333625
  • 2016-10-07 14:22:59
  • 551

好用的jq拖拽插件

对于单个ID对应的使用方法: var elem = document.querySelector('#draggable'); var draggie = new Draggabilly( elem...
  • u011213403
  • u011213403
  • 2017-01-18 13:49:17
  • 184

jQ div移动,拖拽效果

调用此方法时请先加载jq插件; function DivMove(obj,e){     $(obj).mousedown(function(e){        $(obj).css("cur...
  • fasslook
  • fasslook
  • 2016-06-18 15:03:57
  • 1185

jq实现鼠标拖拽效果

拖拽 *{   padding: 0;   margin: 0; } div{   width: 100px;   height: 100px;   background: #f0...
  • hello_noob
  • hello_noob
  • 2017-09-17 11:02:20
  • 683

用JQuery写拖拽的简单实例

html> html> head lang="en"> meta charset="UTF-8"> title>title> head> style> #dv1 { ...
  • ForMyQianDuan
  • ForMyQianDuan
  • 2015-11-13 00:27:41
  • 859

JQuery 实现简单拖拽原理

JQuery 实现简单拖拽原理话不多说直接上代码
  • youngqj
  • youngqj
  • 2010-12-20 17:39:00
  • 2643

利用JQ实现简单的拖曳效果

提出问题 如何实现将一个盒子里的元素拉到另外一个盒子里? 实现思路 此操作包含的事件有 mousedown mousemove mouseup ,对这三个事件进行监听并进行相应的操作。 ...
  • weixin_38788347
  • weixin_38788347
  • 2017-10-18 15:37:47
  • 248

Jquery实现div拖拽

New Document /*模块拖拽*/ .drag{position:absolute;width:100px;height:100px;border:1px solid #ddd;...
  • lyflcear
  • lyflcear
  • 2012-07-30 10:28:23
  • 34136
    个人资料
    等级:
    访问量: 2万+
    积分: 925
    排名: 5万+
    文章存档
    最新评论