js,jQueryはカスタム移動端プレートのドラッグ&ドロップを実現し,web移動端開発
プロジェクトの需要のため、1つの版を並べて移動する端のページの配置のプラグインを移動することができることを必要として、そのため、フロントエンドのとして初めてその任の普通の情況の下でコードを書いて、時間は十分で私はすべて先に1回の原生のJSの効果を書いて、実例のコードは以下の通りです
css :
html:リスト内容
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:
id="target">
<div class="header">div>
<div class="banner">div>
<div class="describe">div>
<div class="details">div>
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
<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
-
-
- */