文档章节

拖拽多个对象到盒子内

 一道菜
发布于 2016/05/19 12:02
字数 371
阅读 7
收藏 0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="js/jquery-1.8.3.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){

//////first点下时
objdrag($(".first"))

//////second点下时
objdrag($(".second"))

//////thirdly点下时
objdrag($(".thirdly"))

//////over///
})


//碰撞检测
function lengthn(obj_one,obj_place){

var objone = obj_one.offset();
var objone_l = objone.left;
var objone_t = objone.top;
var objone_r = objone_l + obj_one.width()
var objone_b = objone_t + obj_one.height()

var objtwo = obj_place.offset();
var objtwo_l = objtwo.left;
var objtwo_t = objtwo.top;
var objtwo_r = objtwo_l + obj_place.width()
var objtwo_b = objtwo_t + obj_place.height()
//console.log(objone_r +"|"+ objtwo_l)
if( objone_r-objtwo_l > 0 && objone_t-objtwo_b<0 && objone_l-objtwo_r<0 && objone_b-objtwo_t>0){
return true;
}
}

/*
$(".first").css("top",o_top)

$(".second").css("top",o_top)

$(".thirdly").css("top",o_top)
*/

function objdrag(objdrag){
//
//////first点下时
objdrag.mousedown(function(ev){

    objdrag.css("position","absolute")

    ev = ev || window.event;
    
    var objall = $(".divall").offset();
    var objall_l = objall.left - ev.pageX;
    var objall_t = objall.top - ev.pageY;
    var obj = objdrag.offset();
    var obj_l = ev.pageX -obj.left;
    var obj_t = ev.pageY -obj.top;
    
    //console.log(objall.left)
    $(document).mousemove(function(e){
    
    objdrag.css("left", e.pageX - objall.left - obj_l)
    objdrag.css("top", e.pageY - objall.top - obj_t)
    //console.log(e.pageX +"|"+ objall.left +"|"+ (e.pageX - objall.left))
    //碰撞对象
    if(lengthn(objdrag,$(".divall"))){
    objdrag.css("opacity","0.5")
    $(".divall").addClass("divb")
    }else{
    objdrag.css("opacity","1")
    $(".divall").removeClass("divb")
    }
    
    })

})
//////first抬起时
objdrag.mouseup(function(){
$(document).unbind();
    
    //碰撞对象
    //在范围对象碰撞了
    if(lengthn(objdrag,$(".divall"))){
    
        objdrag.css("position","")            
        objdrag.css("top","auto").css("left",0).css("opacity","1");        
        $(".divall").removeClass("divb")    
        
    }else{
        
        objdrag.css("position","absolute")
        
    }
    
})


//
}

</script>
<style type="text/css">
body{margin:0;padding:0;}
ul,li{margin:0;padding:0;list-style-type:none;}
.divall{width:200px;height:500px;background:#eee;position:absolute;right:10px;top:10px;}
.divb{border:3px solid #1bd566;background:#FFF;right:7px;top:7px;}
.first{width:200px;height:120px;background:red;z-index:2;top:0;cursor:pointer;}
.second{width:200px;height:150px;background:green;}
.thirdly{width:200px;height:180px;background:#1b88d5;}
</style>
</head>

<body>


<div class="divall">
    <div class="drag first"></div>
    <div class="drag second"></div>
    <div class="drag thirdly"></div>
    
</div>


</body>
</html>
 

© 著作权归作者所有

粉丝 0
博文 12
码字总数 5216
作品 0
东城
私信 提问
2017.11.15-学习笔记:简单实现图片预览及拖拽图片预览

前言:图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了,为了减轻后台服务器的工作量,这里使用HTML5的来实现图片预览。 FileReader 1.构造方式: 2.属性(这...

演员小新
2017/11/15
0
0
基于javascript的拖拽类封装^o^

效果图如下: github地址如下:github地址 使用方法 引入js和对应的css 之后,实例化 具体实现(封装细节) 功能细节整理: 旋转 缩放 平移 技术难点: 旋转时要注意盒子每一个点的位置发生了...

我是大哥的女朋友
04/19
0
0
Android 用户界面---拖放(Drag and Drop)(一)

用Android的拖放框架,能够允许用户使用图形化的拖放手势,把数据从当前布局中的一个View对象中移到另一个View对象中。这个框架包括:拖拽事件类、拖拽监听器、以及辅助的方法和类。 尽管这个...

长平狐
2012/10/16
162
0
css判断不同分辨率显示不同宽度布局实现自适应宽度

1、DIVCSS小案例描述 我们首先设置一个DIV盒子CSS命名为“.abc”,设置其高度为300px,css边框为黑色;以及设置margin:0 auto布局居中。预先设置这两个样式是为了便于观察。 我 们通过手动拖...

梦梦阁
2015/08/03
4.7K
0
HTML5拖拽API实现vue树形拖拽组件

因业务场景需要一个可拖拽修改节点位置的树形组件,因此动手撸了一个,乘此机会摸了一把html5原生拖拽。近期有时间将核心部分代码抽出,简单说下实现方式。 1.树形结构-组件递归使用 树形结构...

花卷爱学习
2018/05/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

kubernetes pod exec接口调用

正文 一般生产环境上由于网络安全策略,大多数端口是不能为集群外部访问的。多个集群之间一般都是通过k8s的ApiServer组件提供的接口通信,如https://192.168.1.101:6443。所以在做云平台时,...

码农实战
44分钟前
6
0
3_数组

3_数组

行者终成事
今天
8
0
经典系统设计面试题解析:如何设计TinyURL(二)

原文链接:https://www.educative.io/courses/grokking-the-system-design-interview/m2ygV4E81AR 编者注:本文以一道经典的系统设计面试题:《如何设计TinyURL》的参考答案和解析为例,帮助...

APEMESH
今天
7
0
使用logstash同步MySQL数据到ES

概述   在生成业务常有将MySQL数据同步到ES的需求,如果需要很高的定制化,往往需要开发同步程序用于处理数据。但没有特殊业务需求,官方提供的logstash就很有优势了。   在使用logstas...

zxiaofan666
今天
10
0
X-MSG-IM-分布式信令跟踪能力

经过一周多的鏖战, X-MSG-IM的分布式信令跟踪能力已基本具备, 特点是: 实时. 只有要RX/TX就会实时产生信令跟踪事件, 先入kafka, 再入influxdb待查. 同时提供实时sub/pub接口. 完备. 可以完整...

dev5
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部