您的位置：首页 > Web前端 > JQuery

jquery.ui.draggble实现拖放控件效果

2018-01-26 14:28 477 查看
这段时间一直在研究这个插件,模仿PageDesigner的效果做了这个demo

html代码:

<!doctype html>
<html lang="us">
<head>
<meta charset="utf-8">
<title>jQuery UI Example Page</title>
<link href="css/hip/jquery-ui.css" rel="stylesheet">
<link href="css/hip/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="css/designer.css">
</head>
<body>
<div class="content">
<div class="content-left">
<div id="designer" class="demo-container">
</div>
</div>

<div class="content-right">
<div class="common-title">
<h4>COMMON</h4>
</div>
<div class="common-info">
<div class="row">
<div class="col-xs-4">
<div class="lyrow">
<div class="info-box">
<img src="images/1.png" alt="">
<p>Contain</p>
</div>
<div class="preview">
<div class="contain common">
<div class="item">Container</div>
<p contenteditable="true">container</p>
</div>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="lyrow">
<div class="info-box">
<img src="images/2.png" alt="">
<p>Heading</p>
</div>
<div class="preview">
<div class="heading common">
<div class="item">Heading</div>
<p contenteditable="true">Lorem Ipsum Dolor Sit Amet</p>
</div>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="lyrow">
<div class="info-box">
<img src="images/3.png" alt="">
<p>Text</p>
</div>
<div class="preview">
<div class="text common">
<div class="item">Text</div>
<p contenteditable="true">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<div class="lyrow">
<div class="info-box">
<img src="images/4.png" alt="">
<p>List</p>
</div>
<div class="preview">
<div class="list common">
<div class="item">List</div>
<ul contenteditable="true">
<li>item1</li>
<li>item2</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="lyrow">
<div class="info-box">
<img src="images/5.png" alt="">
<p>Link</p>
</div>
<div class="preview">
<div class="link common">
<div class="item">List</div>
<p><a href="#" contenteditable="true">This is a link...</a></p>
</div>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="lyrow">
<div class="info-box">
<img src="images/6.png" alt="">
<p>Button</p>
</div>
<div class="preview">
<div class="extra common">
<div class="item">defined</div>
<p contenteditable="true">输入想要放置的内容</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<div class="lyrow">
<div class="info-box">
<img src="images/7.png" alt="">
<p>Image</p>
</div>
<div class="preview">
<div class="extra common">
<div class="item">defined</div>
<p contenteditable="true">自定义区域</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

</div>

</body>

<script src="js/lib/jquery.js"></script>
<script src="js/lib/jquery-ui.js"></script>
<script src="js/lib/bootstrap.js"></script>
<script src="js/designer(1).js"></script>
</html>

js代码:

var screenH=$(document).height();
$('.content').height(screenH);

$('.lyrow').draggable({
connectToSortable:'#designer',
cursor:'move',
distance:20,
revert:'invalid',
helper:'clone',
zIndex: 1000,
opacity:0.3,
start: function( event, ui ) {

}
});
$('.info-box').disableSelection();

$('#designer').droppable({
accept: '.lyrow',
//greedy:true,
drop: function (event, ui) {
var d=ui.helper.find('.preview');
$(this).append(d).css('display','block');

$('#popUp').css('display','block');

//设置id
var divs=$("#designer>div");
var divLe=divs.length;
for(var i=0;i<divLe;i++){
divs[i].id='div'+(i+1);
};

//鼠标经过显示区域名称
$("#designer>div").hover(function (e) {
//alert(12);
$(this).find('.common>.item').css('display','block');
},function(){
$(this).find('.common>.item').css('display','none');
});
}
});


最终实现的大致效果,拖拽右边的控件可以放到左边:



希望大家多多指正
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航