jquery UI 写的拖拽功能-白红宇

jquery UI 写的拖拽功能

阅读量：4157 次

发布时间：2019-05-26

本文共 7227 字，大约阅读时间需要 24 分钟。

<!doctype html>

<html>

<head>

<title>jQuery UI Draggable - Handles</title>

<style>

.freePaper {

height: 100%;

width: 800px;

border: 1px solid #AAA;

padding: 0px

}

.stemTitle {

cursor: move;

}

.stem {

width: 700px;

border: 1px solid #F2F2F2;

margin: 5px;

height: auto;

}

.stem .items {

height: 300px;

width: 100%;

}

.stem .stemTitle {

background: #F2F2F2;

height: 40px;

width: 98%;

float: left;

}

.stem .collapse {

width: 2%;

height: 40px;

float: left;

}

.stem .items{

}

.items .item{

hieght:100%;

border: 1px solid #F2F2F2;

padding:5px 0 0 16px;

}

.clear {

clear: both;

}

.stem .titleSelected {

background: #FFD700;

}

.onmove {

z-index: 200;

background-color: White;

}

</style>

var STEM_MARGIN=5;//大题间的间隙

var Stem_Position_Json=[];//大题的坐标，记录起始位置div id:postion Y

var selectedId='';

var x=0,y=0; //用来记录鼠标位置防止拖拽时触发选中事件

var thisObjHeight;//用来记录当前移动元素高度，用来判断是否换位

var YoffSet;//拖拽时生成新的div会继承原来的样式，导致位置有偏移，此参数用来记录偏移量，纠正新的div位置

$(function() {

//绑定拖拽事件

$( ".stem" ).draggable(dragStemArgs);

//绑定小题的拖拽事件

$( ".items" ).sortable({

revert: true

});

//绑定收起事件

$(".collapse").click(function(){

var next = $(this).next().next();

if(next.is(":hidden")){

next.slideDown(400,initStemPosition);

}else{

next.slideUp(400,initStemPosition);

}

});

//绑定鼠标点击事件

$(".stemTitle").mousedown(function(e){

thisObjHeight=$(this).parent().height();//当前元素高度

thisObj = $(this).parent().clone(true);

thisObj.on(function(){$(this).draggable(dragStemArgs);});

//将paper扩大，方便移动到最后

$(".freePaper").height($(".freePaper").height()+thisObjHeight);

x=e.pageX;

y=e.pageY;

});

//绑定鼠标up事件，将题目选中

$(".stemTitle").mouseup(function(e){

//恢复paper的高度，在点击时曾扩大

$(".freePaper").height("auto");

var xnow=e.pageX;

var ynow=e.pageY;

if(xnow==x&&ynow==y){//鼠标未移动，是单击

var thisId = $(this).parent().attr("id");

if(selectedId==thisId){//已经选中的是这题

$(this).removeClass("titleSelected");

$(this).next().removeClass("titleSelected");

//清空选中id

selectedId="";

}else{

//首先清空其他的选中项

if(selectedId!=''){

clearSelect();

}

$(this).addClass("titleSelected");

$(this).next().addClass("titleSelected");

//设置将当前选中id

selectedId=thisId;

}

});

//初始化试题位置JSON

initStemPosition();

});

/**********************

以下函数用来处理页面js

************************/

//清空所有选中状态

function clearSelect(){

$(".stemTitle").removeClass("titleSelected");

$(".collapse").removeClass("titleSelected");

}

//收起所有

function collapseAll(){

$(".items").slideUp(400,initStemPosition);

}

//展开所有

function expandAll(){

$(".items").slideDown(400,initStemPosition);

}

//添加大题

function addStem(){

var s="<div id=\"stem_5\" class=\"stem\">"+

"<div class=\"stemTitle\">I can be dragged only by this handle这里是题目标题add</div><div class=\"collapse\">A</div>"+

"<div class=clear></div>"+

"<div class=items><div class=item> 这里是第5大题第一小题</div></div></div>";

var o=$(s);

o.appendTo($(".freePaper"));

o.draggable(dragStemArgs);

}

/**********************

以下函数用来处理业务先关

************************/

var dragStemArgs={ handle: ".stemTitle",containment: ".freePaper", scroll: true,

start: function(){

y=$(this).position().top;//记录y轴位置

drag: function(){

$(this).addClass("onmove");

stop: function(){

/**获取移动完的高度，计算如何调整试题顺序

**/

var nowY=$(this).position().top;

var offY=nowY-y;//Y轴移动的像素

var moveObj = $(this);

if(offY>0){ //下移

if(moveObj.parent().children("div:last").attr("id")==$(this).attr("id")){//判断是否最后一个元素，最后一个则不处理

$(this).animate({"left":0+"px","top":0+"px"},300,function(){$(this).removeClass("onmove")});

return;

}

if(Math.abs(offY)<(thisObjHeight+STEM_MARGIN)){//移动未超过当前元素的高度，则不改变顺序

$(this).animate({"left":0+"px","top":0+"px"},300,function(){$(this).removeClass("onmove")});

return;

}

}else{//上移

if($(this).parent().children("div .stem:first").attr("id")==$(this).attr("id")){//判断是否最后一个元素，最后一个则不处理

$(this).animate({"left":0+"px","top":0+"px"},300,function(){$(this).removeClass("onmove")});

return;

}

var lastObjectHeight=$(this).prev().height();

if(Math.abs(offY)<lastObjectHeight+STEM_MARGIN){ //移动未超过上一个元素的头，则不改变顺序

$(this).animate({"left":0+"px","top":0+"px"},300,function(){$(this).removeClass("onmove")});

return;

}

以下处理重新排序

//找到要添加到那個題目後面

var id = findStemPosition(nowY);

var temp = $(this).clone(true);

//獲取最上层的div

var outer=$(this).empty();

//从新复制为字符串，因为这里对象的话无法绑定拖拽事件

var s =outer[0].outerHTML;

//删除移动的元素

$(this).remove();

var $newObj =$(s);

//将所有子元素添加给新的对象

temp.children().appendTo($newObj);

$newObj.css("top",$newObj.position().top-$(id).height());

$newObj.removeClass();

//添加元素

if(id=="beginStem"){

id=".beginStem";

$(id).after($newObj);

}else{

id="#stem_"+id;

$(id).after($newObj);

}

$newObj.addClass("stem");

$newObj.draggable(dragStemArgs);

$newObj.animate({"left":0+"px","top":0+"px"},300,function(){

$(this).removeClass("onmove");

initStemPosition();

});

}

//初始化大题位置数组

function initStemPosition(){

Stem_Position_Json=[];

$(".stem").each(function(i,obj){

var id = $(obj).attr("id").split("stem_")[1];

var data = {"id":id,"pos":$(obj).position().top};

Stem_Position_Json.push(data);

});

}

//根据移动的当前y值查找需要替换的题目的位置

function findStemPosition(positionY){

var id="";

if(positionY<Stem_Position_Json[0].pos){ //上移到最上一层直接返回"";

return "beginStem";

}

for(var i=0,j=Stem_Position_Json.length;i<j-1;i++){

var data1 = Stem_Position_Json[i];

var data2 = Stem_Position_Json[i+1];

if(data1.pos<positionY&&positionY<data2.pos){

id=data1.id;

return id;

}

if(id==""){//都没有，说明是最后一个

return Stem_Position_Json[Stem_Position_Json.length-1].id;

}

</script>

</head>

<body>

</div>

I can be dragged only by this handle这里是题目标题1

</div>

</div>

这里是第一大题第一小题<br/>这里是第一大题第一小题<br/>这里是第一大题第一小题<br/>这里是第一大题第一小题<br/>这里是第一大题第一小题<br/>

</div>

这里是第一大题第二小题

</div>

这里是第一大题第三小题<br/>这里是第一大题第三小题<br/>这里是第一大题第三小题<br/>

</div>

这里是第一大题第四小题

</div>

I can be dragged only by this handle这里是题目标题2

</div>

</div>

这里是第二大题第一小题

</div>

这里是第二大题第二小题<br/>

</div>

这里是第二大题第三小题

</div>

这里是第二大题第四小题

</div>

I can be dragged only by this handle这里是题目标题3

</div>

</div>

这里是第三大题第一小题

</div>

这里是第三大题第二小题

</div>

这里是第三大题第三小题

</div>

这里是第三大题第四小题

</div>

I can be dragged only by this handle这里是题目标题4

</div>

</div>

这里是第4大题第一小题

</div>

这里是第4大题第二小题

</div>

</body>

</html>

转载地址：http://nfyxi.baihongyu.com/

你可能感兴趣的文章

servlet中的cookie和session

查看>>

过滤器及JSP九大隐式对象

查看>>

【Python】学习笔记——-7.0、面向对象编程

查看>>

【Python】学习笔记——-7.2、访问限制

查看>>

【Python】学习笔记——-7.3、继承和多态

查看>>

【Python】学习笔记——-7.5、实例属性和类属性

查看>>

git中文安装教程

查看>>

虚拟机 CentOS7/RedHat7/OracleLinux7 配置静态IP地址 Ping 物理机和互联网

查看>>

Jackson Tree Model Example

Android使用webservice客户端实例

查看>>

[转]C语言printf

查看>>

C 语言学习---ComboBox相关、简易“假”管理系统

查看>>

C 语言学习---回调、时间定时更新程序

查看>>