js,jQuery实现拖拽自定义移动端板块，web移动端开发
2017-01-13 11:00
691 查看
由于项目需求，需要一个能排版移动端页面布局的插件，因此，作为前端的就首当其任了
一般情况下写代码，时间充足我都会先写一遍原生JS 效果，实例代码如下
css :
html:
列表内容
一般情况下写代码，时间充足我都会先写一遍原生JS 效果，实例代码如下
css :
<style type="text/css">
*{
margin:0;
padding:0;
}
#target{
width:400px;
height:700px;
margin:100px auto;
border: 1px solid #333;
position:relative;
}
.header{
height:50px;
background:blue;
box-sizing: border-box;
border: 1px solid #ccc;
min-width: 320px;
cursor: all-scroll;
width: 100%;
}
.banner{
width: 100%;
height:100px;
background:aquamarine;
box-sizing: border-box;
border: 1px solid #ccc;
cursor: all-scroll;
}
.describe{
width: 100%;
height:150px;
background:pink;
box-sizing: border-box;
border: 1px solid #666;
cursor: all-scroll;
}
.details{
width: 100%;
height:300px;
background:green;
box-sizing: border-box;
border: 1px solid #666;
cursor: all-scroll;
}
</style>html:
<body id="target"> <div class="header"></div> <div class="banner"></div> <div class="describe"></div> <div class="details"></div> </body>
js:
<script type="text/javascript">
window.onload = function () {
var objP = document.getElementById('target');
objP.onmousedown = function (ev){
var oEe = ev || event;
var oSrc = oEe.srcElement || oEe.target;
if (oSrc.nodeName == 'DIV'){
var oldY = oEe.clientY;
var oldX = oEe.clientX;
var iTop = oSrc.offsetTop;
var iLeft = oSrc.offsetLeft;
var iW = oSrc.offsetWidth;
var iH = oSrc.offsetHeight;
oSrc.style.position = 'absolute';
oSrc.style.top = iTop + 'px';
oSrc.style.left = iLeft + 'px';
var oSpan = document.createElement('span');
oSpan.style.display = 'block';
oSpan.style.height = iH + 'px';
oSpan.style.width = iW + 'px';
oSpan.style.border = '2px dashed #666';
oSpan.style.boxSizing = 'border-box';
oSpan.id = 'obj1';
objP.insertBefore(oSpan,oSrc);
//console.debug(oldY,oldX,iTop,iLeft);
document.onmousemove = function (ev) {
var oEe = ev || event;
var iNowT = oSrc.offsetTop;
var iT = oEe.clientY - oldY + iTop;
oSrc.style.top = iT + 'px';
if (iT - iNowT < 0){
var obj = document.getElementById('obj1');
var prev = obj.previousElementSibling;
if (prev){
var prevTop = prev.offsetTop;
var prevH = prev.offsetHeight/2;
if (iT <= (prevTop + prevH)){
var objNext = obj.nextElementSibling;
objP.removeChild(prev);
objP.insertBefore(prev,objNext);
}
}
}else if (iT - iTop > 0){
var obj = document.getElementById('obj1');
var next = obj.nextElementSibling;
console.debug(next);
if (next){
var nextTop = next.offsetTop;
var nextH = next.offsetHeight/2;
if ((iT + iH)>= (nextTop + nextH)){
var obj = document.getElementById('obj1');
objP.removeChild(next);
objP.insertBefore(next,obj);
}
}
}
return false;
//oSrc.setCapture && oSrc.setCapture();
};
document.onmouseup = function () {
var change = oSrc.cloneNode(true);
//console.debug(change);
change.removeAttribute('style');
//oSrc.releaseCapture && oSrc.releaseCapture();
objP.removeChild(oSrc);
var obj = document.getElementById('obj1');
objP.insertBefore(change,obj);
objP.removeChild(obj);
document.onmousemove = document.onmouseup = null;
}
}else{
return;
}
return false;
};
};
</script>这只是原生js的参考实例 然后后台需求弄成Jquery 插件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>drag布局</title>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/dargFlex.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
*{
margin:0;
padding:0;
}
#target{
border: 1px solid #666;
margin:0 auto;
position:relative;
}
.header{
height:50px;
background: #FFA500;
cursor: all-scroll;
}
.banner{
height:100px;
background: lawngreen;
cursor: all-scroll;
}
.nav{
height:50px;
background: hotpink;
cursor: all-scroll;
}
.menu{
height:200px;
background: mediumvioletred;
cursor: all-scroll;
}
</style>
<script type="text/javascript">
$(function () {
$(target).dargFlex('drag');
});
</script>
</head>
<body id="target">
<div class="header drag"></div>
<div class="banner drag"></div>
<div class="nav drag"></div>
<div class="menu drag"></div>
</body>
</html>(function ($) {
$.fn.dargFlex = function (classN,json) {
console.debug(typeof this);
var json = json || {};
json.dragStyle = json.dragStyle || {};
json.siteStyle = json.siteStyle || {};
json.dragStyle.zIndex = json.dragStyle.zIndex || 2;
json.dragStyle.opacity = json.dragStyle.opacity || 1;
json.dragStyle.border = json.dragStyle.border || 'none';
json.siteStyle.opacity = json.siteStyle.opacity || 1;
json.siteStyle.border = json.siteStyle.border || '2px dashed #666';
json.siteStyle.bgColor = json.siteStyle.bgColor || '#FFF';
var classN = classN || 'dragObj';
var $this = this;
this.bind('mousedown',function (ev){
var oEe = ev || event;
var oSrc = oEe.srcElement || oEe.target; //默认不带参数，默认全部子项拖拽
if ($(oEe.target).hasClass(classN)){ //默认以类名匹配拖拽元素
var oldY = oEe.clientY;
var oldX = oEe.clientX;
var iTop = oEe.target.offsetTop;
var iLeft = oEe.target.offsetLeft;
var iW = oEe.target.offsetWidth;
var iH = oEe.target.offsetHeight;
$(oEe.target).css({
'position':'absolute',
'top':iTop+'px',
'left':iLeft + 'px',
'width':iW +'px',
'z-index':json.dragStyle.zIndex,
'opacity':json.dragStyle.opacity,
'border':json.dragStyle.border
});
var oSpan = document.createElement('span');
$(oSpan).css({
'display':'block',
'height':iH + 'px',
'width': iW + 'px',
'opacity':json.siteStyle.opacity,
'border':json.siteStyle.border,
'background':json.siteStyle.bgColor,
'box-sizing':'border-box',
'-webkit-box-sizing':'border-box',
'-ms-box-sizing':'border-box',
'-moz-box-sizing':'border-box'
});
$(oSpan).attr('id','obj');
//console.debug(this);
//objP.insertBefore(oSpan,oSrc);
$this[0].insertBefore(oSpan,oSrc);
function move (ev) {
var oEe = ev || event;
var newY = oEe.clientY;
var iNowT = oEe.target.offsetTop;
var iT = newY - oldY + iTop;
$(oSrc).css('top',iT+'px');
if (iT - iNowT < 0){
var obj = document.getElementById('obj');
var prev = obj.previousElementSibling;
if (prev){
var pTop = prev.offsetTop;
var pH = prev.offsetHeight/2;
if (iT <= (pTop + pH)){
$this[0].removeChild(prev);
var objNext = obj.nextElementSibling;
$this[0].insertBefore(prev,objNext);
}
}
}
if (iT - iNowT > 0){
var obj = document.getElementById('obj');
var next = obj.nextElementSibling;
if (next){
var nTop = next.offsetTop;
var nH = next.offsetHeight/2;
if ((iT + iH) >= (nTop + nH)){
$this[0].removeChild(next);
$this[0].insertBefore(next,obj);
}
}
}
oEe.preventDefault();
}
function dragUp (ev) {
var change = ev.target.cloneNode(true);
var obj = document.getElementById('obj');
//$(ev.target).remove();
$this[0].removeChild(oSrc);
$(oSrc).removeAttr('style');
$('#obj').before(oSrc);
$this[0].removeChild(obj);
$(document).unbind('mousemove',move);
$(document).unbind('mouseup',dragUp);
}
$(document).bind('mousemove',move);
$(document).bind('mouseup',dragUp);
}
oEe.preventDefault();
});
}
})(jQuery);
/*
-
- API 文档
-
-
- jQuery.dargFlex(classN,json)
-
- jQuery = parentNode
-
- 参数：
- classN = 指定的触发拖拽的唯一源头的类名，必须给
-
- json = 关于拖拽元素和定位元素的样式，携带两个key
- json.dragStyle = {}; 拖拽元素
- 可以修改
- opacity json.dragStyle.opacity
- border json.dragStyle.border
- z-index json.dragStyle.zIndex
-
- json.siteStyle = {}; 定位元素
- 可修改
- opacity json.siteStyle.opacity
- border json.siteStyle.border
- zIndex json.siteStyle.zIndex
-
-
- */列表内容
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery 移动端拖拽（模块化开发，触摸事件，webpack）
- 用js实现的模拟jquery的animate自定义动画(2.5K)
- JQuery实现个性化，可以拖拽 自定义自己的界面（一）
- 使用jQuery开发一个基于HTML5的漂亮图片拖拽上传web应用
- jQuery自定义插件开发基础1——jQuery实用函数的实现
- jquery方法+js一般方法+js面向对象方法实现拖拽效果
- JavaScript-JS命名空间的构造和实现-[web前端开发]
- jquery自定义插件开发之window的实现过程
- node.js WEB开发中图片验证码的实现方法
- jquery.dragsort.js 实现拖拽过程遇到的问题
- web开发 js、jQuery文件上传限制类型
- JQuery实现个性化，可以拖拽 自定义自己的界面（二）
- jquery/js 实现 标签 条码 一维码 Web页面 区域打印解决方案 实例
- 开发自定义web控件时把css，js嵌入成资源
- 利用jQuery和JS实现奇偶行背景颜色自定义效果
- jQuery实现页面模块拖拽与模块自定义效果.rar
- Pc端和移动端拖拽组件jquery.drag.js
- zepto.js 手机web开发 js 框架，类似于jquery
- web开发：表头固定（利用jquery实现）
- node.js WEB开发中图片验证码的实现方法