<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="js/jquery-1.8.3.min.js"></script>
<style type="text/css">
*,
html,
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "PingFangSC-Light", 'helvetica neue', 'hiragino sans gb', tahoma, 'microsoft yahei ui', 'microsoft yahei', simsun, sans-serif;
}
body,
div {
margin: 0;
padding: 0;
font-size: 12px;
}
html,
body {
min- 1220px;
overflow-x: auto;
overflow-y: hidden;
height: 100%;
}
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
body {
background: url("images/content_bg.png") bottom right;
background-size: cover;
overflow-y: auto;
}
.header_bg {
height: 60px;
line-height: 60px;
100%;
background-color: #fff;
color: #484848;
padding: 0 20px;
font-size: 24px;
}
.clear {
clear: both;
1px;
height: 0px;
line-height: 0px;
font-size: 1px;
}
.content{
1200px;
height: 620px;
margin:0 auto;
margin-top:60px;
background-color: #fff;
border-radius: 3px;
}
.bor2 {
padding: 20px 0 0 0;
}
.body-info {
/* height: 100%; */
height: 620px;
}
.box {
position: static;
float: left;
100%;
/* height: 800px; */
height: 100%;
margin: 0 auto;
border-right: 1px solid #cedfea;
border-radius: 3px 0 0 3px;
}
.box-text{
text-align: center;
font-size: 18px;
color: #484848;
margin-top:60px;
}
.box2 {
margin-left: 200px;
height: 100%;
}
.bor {
position: static;
80px;
height: 80px;
line-height: 80px;
border-radius: 50%;
background-color: #fff;
margin: 0 0 5px 0;
border: 1px solid #ccc;
text-align: center;
}
.box .bor {
margin-top: 50px;
margin-left: 60px;
}
.boradd {
position: static;
80px;
height: 80px;
line-height: 80px;
margin: 0 0 5px 0;
margin-top: 50px;
margin-left: 60px;
margin-bottom: 50px;
border-radius: 50%;
background-color: #fff;
border: 1px solid #cedfea;
text-align: center;
cursor: pointer;
}
.bg .bor {
border: 0;
cursor: pointer;
}
.borp {
position: absolute;
80px;
height: 80px;
border-radius: 50%;
border: 1px solid #ccc;
background: #ececec;
z-index: 2;
}
.bg,
.bgadd {
float: left;
82px;
height: 82px;
border-radius: 50%;
/* margin: 8px 5px 0 140px; */
margin: 8px 5px 0 0px;
border: 1px dashed #5b5b59;
margin-top: 230px;
cursor: pointer;
/* position: relative; */
}
.bg#bg1 {
margin-left: 100px;
}
.line {
float: left;
margin: 269px 30px 0 30px;
100px;
/* border-top:1px dashed #ececec; */
position: relative;
}
.line-animate {
100%;
height: 10px;
background: url("images/line2.gif") center no-repeat;
display: none;
}
.line-static {
100%;
height: 10px;
background: url("images/line2.png") center no-repeat;
opacity: .6;
}
.text2 {
200px;
}
/* .bgColor { border: 1px dashed #f00; } */
.pic {
100%;
height: 100%;
border-radius: 50%;
cursor: pointer;
}
.pic1 {
background: url("images/pic1.png") center no-repeat;
background-size: 50px;
}
.pic1.on {
background: url("images/pic1-1.png") center no-repeat;
background-size: 50px;
}
.pic2 {
background: url("images/pic2.png") center no-repeat;
background-size: 50px;
}
.pic2.on {
background: url("images/pic2-2.png") center no-repeat;
background-size: 50px;
}
.pic3 {
background: url("images/pic3.png") center no-repeat;
background-size: 50px;
}
.pic3.on {
background: url("images/pic3-3.png") center no-repeat;
background-size: 50px;
}
.picadd {
background: url("images/icon-add.png") center no-repeat;
background-size: 50px;
}
#bg1 {
background: url("images/icon-select1.png") center no-repeat;
}
#bg2 {
background: url("images/icon-select2.png") center no-repeat;
}
#bg3 {
background: url("images/icon-select3.png") center no-repeat;
}
#bgadd {
background: url("images/icon-add.png") center no-repeat;
background-size: 50px;
}
.clearfix {
clear: both;
}
img{
vertical-align: middle;
}
.footer_bg {
100%;
float: left;
text-align: right;
padding-right: 120px;
margin-top: 80px;
}
.btn-bg {
color: #fff;
background-color: #06adfc;
height: 30px;
line-height: 30px;
font-size: 12px;
padding: 0 20px;
border: 0;
outline: none;
cursor: pointer;
/* float:left; */
margin-left: 20px;
border-radius: 4px;
}
.input {
80px;
height: 30px;
border: 1px solid #ececec;
margin-left: 5px;
padding-left: 5px;
border-radius: 4px;
outline: none;
font-size: 12px;
border-radius: 4px;
}
.input-msg {
margin-left: 5px;
}
.align-center{
max- 1200PX;
MARGIN:0 AUTO;
80%;
}
.tips{
float: left;
max- 200px;
margin-left:100px;
text-align: left;
margin-top:5px;
height: 132px;
overflow: hidden;
}
.tips p{
color: #888;
font-size: 14px;
line-height: 22px;
height:22px;
}
.btnlay{
float:right;
margin-right: 45px;
}
/* #hhh{
900px;
height: 200px;
position: absolute;
bottom: 200px;
text-align: center;
font: 14px;
margin: 0 auto;
}
#hhh p{
font-size: 16px;
color: #9B9B9B;
height: 30px;
line-height: 30px;
} */
</style>
</head>
<body>
<div class="header_bg"><img src="images/logo.png"> ThingsPark物联演示页面</div>
<div class="body-info">
<div class="content">
<div class="box">
<div class="box-text">演示物件</div>
<!-- <div class="bor" draggable="true" id="drag1" >
<div class="pic pic1" id="pic1"></div>
</div>
<div class="bor" draggable="true" id="drag2" >
<div class="pic pic2" id="pic2"></div>
</div>
<div class="bor" draggable="true" id="drag3" >
<div class="pic pic3" id="pic3"></div>
</div> -->
<!-- <div class="boradd">
<div class="pic picadd"></div>
</div> -->
<div class="container">
<ul>
<li><img src="./images/pic1.png" alt=""></li>
<li><img src="./images/pic2.png" alt=""></li>
<li><img src="./images/pic3.png" alt=""></li>
</ul>
<ul class="container_send"></ul>
</div>
<div class="btnlay">
<button class="btn-bg" onclick="start()" id="start">开始演示</button>
</div>
</div>
<style>
.container ul{ 200px;padding: 15px;min-height:300px; margin:20px 0;display: block;float: left;border-radius: 5px; }
.container ul li{display: block;float: left; 200px;line-height: 35px;border-radius: 4px;margin: 0;padding: 0;list-style: none;margin-bottom:10px;-moz-user-select: none;user-select: none;text-indent: 10px;color: #555;}
.container_send{ 800px !important;height:80px !important; min-height: 100px !important;margin-top: 150px !important;display:inline-block;margin-left:100px !important;}
.container_send li{float: left;33% !important;}
</style>
<div class="box2">
<div class="align-center">
<!-- <div class="bg" id="bg1" ></div>
<div class="line">
<div class="line-animate" id="line1"></div>
</div>
<div class="bg" id="bg2" ></div>
<div class="line">
<div class="line-animate" id="line2"></div>
</div>
<div class="bg" id="bg3" ></div> -->
<!-- <div class="bgadd" id="bgadd">
</div> -->
<div class="footer_bg">
<div id="hhh" class="tips"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</body>
<script type="text/javascript">
function start(){
$(function(){
//出入允许拖拽节点的父容器，一般是ul外层的容器
drag.init('container');
});
}
/** 拖拽功能实现原理和说明：
1、说明：拖拽实现一般有两种方式，一种是使用html的新特性dragable，但是由于在火狐浏览器上dragable每拖拽一次会打开一个新的标签，
尝试阻止默认行为和冒泡都无法解决，所以使用第二种方法来实现拖拽。第二种方法是使用js监听鼠标三个事件，配合节点操作来实现。
2、实现原理：
01-在允许拖拽的节点元素上，使用on来监听mousedown(按下鼠标按钮)事件，鼠标按下后，克隆当前节点
02-监听mousemove(鼠标移动)事件，修改克隆出来的节点的坐标，实现节点跟随鼠标的效果
03-监听mouseup(放开鼠标按钮)事件，将原节点克隆到鼠标放下位置的容器里，删除原节点，拖拽完成。
3、优势：
01-可动态添加允许拖拽的节点(因为使用了on委托事件)
02-可获取到原节点，跟随节点，目标节点的对象，可根据需要进行操作。
03-使用js实现，兼容性好。
**/
//拖拽
var drag = {
class_name : null, //允许放置的容器
permitDrag : false, //是否允许移动标识
_x : 0, //节点x坐标
_y : 0, //节点y坐标
_left : 0, //光标与节点坐标的距离
_top : 0, //光标与节点坐标的距离
old_elm : null, //拖拽原节点
tmp_elm : null, //跟随光标移动的临时节点
new_elm : null, //拖拽完成后添加的新节点
//初始化
init : function (className){
//允许拖拽节点的父容器的classname(可按照需要，修改为id或其他)
drag.class_name = className;
//监听鼠标按下事件，动态绑定要拖拽的节点（因为节点可能是动态添加的）
$('.' + drag.class_name).on('mousedown', 'ul li', function(event){
//当在允许拖拽的节点上监听到点击事件，将标识设置为可以拖拽
drag.permitDrag = true;
//获取到拖拽的原节点对象
drag.old_elm = $(this);
//执行开始拖拽的操作
drag.mousedown(event);
return false;
});
//监听鼠标移动
$(document).mousemove(function(event){
//判断拖拽标识是否为允许，否则不进行操作
if(!drag.permitDrag) return false;
//执行移动的操作
drag.mousemove(event);
return false;
});
//监听鼠标放开
$(document).mouseup(function(event){
//判断拖拽标识是否为允许，否则不进行操作
if(!drag.permitDrag) return false;
//拖拽结束后恢复标识到初始状态
drag.permitDrag = false;
//执行拖拽结束后的操作
drag.mouseup(event);
return false;
});
},
//按下鼠标 执行的操作
mousedown : function (event){
console.log('我被mousedown了');
//1.克隆临时节点，跟随鼠标进行移动
drag.tmp_elm = $(drag.old_elm).clone();
//2.计算 节点 和 光标 的坐标
drag._x = $(drag.old_elm).offset().left;
drag._y = $(drag.old_elm).offset().top;
var e = event || window.event;
drag._left = e.pageX - drag._x;
drag._top = e.pageY - drag._y;
//3.修改克隆节点的坐标，实现跟随鼠标进行移动的效果
$(drag.tmp_elm).css({
'position' : 'absolute',
'background-color' : '#FF8C69',
'left' : drag._x,
'top' : drag._y,
});
//4.添加临时节点
tmp = $(drag.old_elm).parent().append(drag.tmp_elm);
drag.tmp_elm = $(tmp).find(drag.tmp_elm);
$(drag.tmp_elm).css('cursor', 'move');
},
//移动鼠标 执行的操作
mousemove : function (event){
console.log('我被mousemove了');
//2.计算坐标
var e = event || window.event;
var x = e.pageX - drag._left;
var y = e.pageY - drag._top;
var maxL = $(document).width() - $(drag.old_elm).outerWidth();
var maxT = $(document).height() - $(drag.old_elm).outerHeight();
//不允许超出浏览器范围
x = x < 0 ? 0: x;
x = x > maxL ? maxL: x;
y = y < 0 ? 0: y;
y = y > maxT ? maxT: y;
//3.修改克隆节点的坐标
$(drag.tmp_elm).css({
'left' : x,
'top' : y,
});
//判断当前容器是否允许放置节点
$.each($('.' + drag.class_name + ' ul'), function(index, value){
//获取容器的坐标范围 (区域)
var box_x = $(value).offset().left; //容器左上角x坐标
var box_y = $(value).offset().top; //容器左上角y坐标
var box_width = $(value).outerWidth(); //容器宽
var box_height = $(value).outerHeight();//容器高
//给可以放置的容器加背景色
if(e.pageX > box_x && e.pageX < box_x-0+box_width && e.pageY > box_y && e.pageY < box_y-0+box_height){
//判断是否不在原来的容器下（使用坐标进行判断：x、y任意一个坐标不等于原坐标，则表示不是原来的容器）
if($(value).offset().left !== drag.old_elm.parent().offset().left
|| $(value).offset().top !== drag.old_elm.parent().offset().top){
$(value).css('background-color', '#FFEFD5');
}
}else{
//恢复容器原背景色
$(value).css('background-color', '#FFFFF0');
}
});
},
//放开鼠标 执行的操作
mouseup : function (event){
console.log('我被mouseup了');
//移除临时节点
$(drag.tmp_elm).remove();
//判断所在区域是否允许放置节点
var e = event || window.event;
$.each($('.' + drag.class_name + ' ul'), function(index, value){
//获取容器的坐标范围 (区域)
var box_x = $(value).offset().left; //容器左上角x坐标
var box_y = $(value).offset().top; //容器左上角y坐标
var box_width = $(value).outerWidth(); //容器宽
var box_height = $(value).outerHeight();//容器高
//判断放开鼠标位置是否想允许放置的容器范围内
if(e.pageX > box_x && e.pageX < box_x-0+box_width && e.pageY > box_y && e.pageY < box_y-0+box_height){
//判断是否不在原来的容器下（使用坐标进行判断：x、y任意一个坐标不等于原坐标，则表示不是原来的容器）
if($(value).offset().left !== drag.old_elm.parent().offset().left
|| $(value).offset().top !== drag.old_elm.parent().offset().top){
//向目标容器添加节点并删除原节点
tmp = $(drag.old_elm).clone();
var newObj = $(value).append(tmp);
$(drag.old_elm).remove();
//获取新添加节点的对象
drag.new_elm = $(newObj).find(tmp);
}
}
//恢复容器原背景色
$(value).css('background-color', '#ffffff');
});
},
};
</script>
</html>