Realize the Two-way Drag & Drop Lists
Set up Basic Program
Now it's time to do it in action. Let's create the two-way drag-&-drop lists firstly, since it seems more easy.
We setup the basic HTML and CSS, which is the flesh of the program:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Assign Scheduler to Panel - Scheduler lists</title>
<link rel="stylesheet" href="script/css/custom-theme/jquery-ui-1.8.18.custom.css">
<script src="script/js/jquery-1.6.2.min.js"></script>
<script src="script/js/jquery-ui-1.8.21.custom.min.js"></script>
<style>
#scheduler-list-container {
width: 360px;
height: 780px;
border: 1px solid crimson;
float: right;
}
#scheduler-list {
width: 260px;
min-height: 280px;
padding-left: 0px;
border: 1px solid lime;
}
.scheduler-list-item {
width: 200px;
height: 26px;
border: 1px solid #DDD;
background-color: #FBFBFB;
background-image: url('images/scheduler-icon.png');
background-repeat: no-repeat;
background-position: top left;
margin-top: 5px;
padding: 4px;
list-style-type: none;
}
.scheduler-list-item label {
margin-left: 26px;
font-size: 0.8em;
}
.hightlight-target-background{
background-color: rgb(255, 228, 122);
}
#panel-scheduler-container {
width: 228px;
min-height: 80px;
border: 1px solid mediumvioletred;
float: left;
}
#panel-schedulers {
width: 220px;
min-height: 60px;
border: 2px solid hotpink;
padding-left: 0px;
}
</style>
</head>
<body>
<div id="scheduler-list-container">
<label id="title">schedulers</label>
<ul id&#
最低0.47元/天 解锁文章
974
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
