首页
IT
登录
6mi
u
盘
搜
搜 索
IT
关于常见的左右赋权限的移动样式
关于常见的左右赋权限的移动样式
xiaoxiao
2021-03-25
60
效果如图:
代码如下:
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>
拖拽演示
</
title
>
<
script
type
=
"text/javascript"
src
=
"js/jquery-2.1.1.min.js"
>
</
script
>
<
style
type
=
"text/css"
>
*
{
margin
:
0
;
padding
:
0
;
}
.box
{
width
:
960
px
;
height
:
auto
;
/*border: 5px solid #ddd;*/
margin
:
30
px auto
;
}
.box1
{
width
:
400
px
;
min-height
:
190
px
;
float
:
left
;
border
:
5
px solid
#360
;
}
.box2
{
width
:
400
px
;
min-height
:
190
px
;
float
:
right
;
border
:
5
px solid
#630
;
}
li
{
list-style
:
none
;
width
:
100
%
;
height
:
30
px
;
line-height
:
30
px
;
text-indent
:
30
px
;
border-bottom
:
1
px solid
#fff
;
background
:
#ddd
;
color
:
#f00
;
font
:
800
14
px/
30
px
"微软雅黑"
;
cursor
:
pointer
;
}
.box3
{
width
:
140
px
;
height
:
60
px
;
float
:
left
;
}
.box3
li
{
background
:
#999
;
font-weight
:
800
;
width
:
100
px
;
height
:
30
px
;
margin
:
50
px auto
;
color
:
#fff
;
border-radius
:
5
px
;
}
.active
{
color
:
#fff
;
background
:
#f00
;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"box"
>
<
div
class
=
"box1"
>
<
ul
>
<
li
>
11111111
</
li
>
<
li
>
22222222
</
li
>
<
li
>
33333333
</
li
>
<
li
>
44444444
</
li
>
</
ul
>
</
div
>
<
div
class
=
"box3"
>
<
li
from
=
".box1"
to
=
".box2"
>
====>
</
li
>
<
li
from
=
".box2"
to
=
".box1"
>
<====
</
li
>
</
div
>
<
div
class
=
"box2"
>
<
ul
>
<
li
>
5555555
</
li
>
<
li
>
6666666
</
li
>
<
li
>
7777777
</
li
>
</
ul
>
</
div
>
</
div
>
</
body
>
<
script
type
=
"text/javascript"
>
(
function
($)
{
$(
function
()
{
/*给每个元素添加draggable = true属性*/
$(
".box1 ul li"
).each(
function
(index,element)
{
$(
this
).attr({
"draggable"
:
"true"
});
/*设置一个开关用来设置元素拖到的时候为打开，停止拖动的时候就关闭*/
$(
this
).attr({
"onOff"
:
"false"
}); $(
this
).get(
0
).ondragstart =
function
(ev)
{
// console.log("拖动开始");
$(
this
).attr({
"onOff"
:
"true"
}); ev.dataTransfer.setData(
"name"
,
""
);
// console.log($(this).attr("onOff"));
}; $(
this
).get(
0
).ondragend =
function
()
{
$(
this
).attr({
"onOff"
:
"false"
});
// console.log("拖动结束");
$(
this
).attr(
"class"
,
""
); }; });
/*设置接收区域*/
//拖拽进去阻止默认事件
$(
".box2"
).get(
0
).ondragenter =
function
(e)
{
// console.log("拖拽进来");
e.preventDefault(); };
//拖拽在里面运动的时候阻止默认事件
$(
".box2"
).get(
0
).ondragover =
function
(e)
{
// console.log("在里面运动");
e.preventDefault(); };
//拖拽离开的时候
$(
".box2"
).get(
0
).ondragleave =
function
(e)
{
// console.log("拖拽离开");
e.preventDefault(); };
/*拖拽投放的时候*/
$(
".box2"
).get(
0
).ondrop =
function
(e)
{
e.preventDefault();
//判断被拖的元素是不是属于拖动的情况下
$(
".box1 ul li"
).each(
function
()
{
if
($(
this
).attr(
"onOff"
) ==
"true"
){ $(
".box2 ul"
).append($(
this
)); $(
this
).attr(
"class"
,
""
); }; }); $(
"box2 ul li"
).each(
function
()
{
$(
this
).attr(
"class"
,
""
); });
/*对拖拽进去的元素去除拖拽及开关判断*/
// $(".box2 ul li").each(function(index,element){
// $(this).removeAttr("draggable").end().removeAttr("onOff");
// });
}; $(
".box2 ul li"
).each(
function
(index,element)
{
$(
this
).attr({
"draggable"
:
"true"
});
/*设置一个开关用来设置元素拖到的时候为打开，停止拖动的时候就关闭*/
$(
this
).attr({
"onOff"
:
"false"
}); $(
this
).get(
0
).ondragstart =
function
(ev)
{
// console.log("拖动开始");
$(
this
).attr({
"onOff"
:
"true"
}); ev.dataTransfer.setData(
"name"
,
""
);
// console.log($(this).attr("onOff"));
}; $(
this
).get(
0
).ondragend =
function
()
{
$(
this
).attr({
"onOff"
:
"false"
,
"class"
:
""
});
// console.log("拖动结束");
}; });
/*设置接收区域*/
//拖拽进去阻止默认事件
$(
".box1"
).get(
0
).ondragenter =
function
(e)
{
// console.log("拖拽进来");
e.preventDefault(); };
//拖拽在里面运动的时候阻止默认事件
$(
".box1"
).get(
0
).ondragover =
function
(e)
{
// console.log("在里面运动");
e.preventDefault(); };
//拖拽离开的时候
$(
".box1"
).get(
0
).ondragleave =
function
(e)
{
// console.log("拖拽离开");
e.preventDefault(); };
/*拖拽投放的时候*/
$(
".box1"
).get(
0
).ondrop =
function
(e)
{
e.preventDefault();
//判断被拖的元素是不是属于拖动的情况下
$(
".box2 ul li"
).each(
function
()
{
if
($(
this
).attr(
"onOff"
) ==
"true"
){ $(
".box1 ul"
).append($(
this
)); }; $(
this
).attr(
"class"
,
""
); }); $(
".box1 ul li"
).each(
function
(index,element)
{
$(
this
).attr(
"class"
,
""
); });
/*对拖拽进去的元素去除拖拽及开关判断*/
// $(".box1 ul li").each(function(index,element){
// $(this).removeAttr("draggable").end().removeAttr("onOff");
// });
};
/*---------------按钮切换js开始----------------*/
$(
".box1 li,.box2 li"
).on(
"click"
,
function
()
{
$(
this
).toggleClass(
"active"
); }); $(
".box3 li"
).click(
function
()
{
/** * $(this)==$(".box"3 li) * * */
$($(
this
).attr(
"from"
)).find(
"li.active"
).appendTo( $(
this
).attr(
"to"
)+
" ul"
).attr(
"class"
,
""
); }); }); })(jQuery);
</
script
>
</
html
>
转载请注明原文地址: https://ju.6miu.com/read-33064.html
技术
最新回复
(
0
)
