0
我想在我的代码中添加jQuery UI的可排序功能。此外，如果你们可以帮助我将滑动切换功能应用于特定的单击div元素而不是全部，那将是非常好的。 我附上了我的代码以及此查询。 ##标题##干杯。如何使用动态创建的div元素排序的jQuery UI？
<html>
<head>
<title>Drag and Drop</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lato">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<style>
#body_design
{
margin-left : 50px;
margin-right : 0px;
margin-top : 0px;
padding : 0px;
background-color : #00FFFF;
}
#header
{
margin-left : -50px;
margin-top : 0px;
height : 80px;
padding-top : 10px;
padding-left : 100px;
padding-bottom : 20px;
background-color : #163C50;
}
#add
{
width : 160px;
height : 90px;
background-color : #233B3B;
text-align : center ;
font-family : 'Lato',serif;
font-size : 70px;
font-weight : 400;
}
#container
{
margin-top : 20px;
padding-top : 10px;
padding-left : 10px;
padding-bottom : 10px;
padding-right : 10px;
margin : left : 50px;
margin-right : 50px;
text-align : center;
position : relative;
}
.module
{
height : 35px;
background-color : #1E506B;
margin : 60px;
font-family : 'Lato',serif;
font-weight : bold;
padding-top : 12px;
padding-bottom : 12px;
text-align : center;
}
.deleteModule
{
float : right;
padding-right : 80px;
padding-bottom : 40px;
}
.star
{
float : right;
padding-right : 60px;
padding-bottom : 30px;
padding-bottom : 40px;
}
.dropModule
{
height : 58px;
background-color : #000000;
margin-top : -30px;
width : 50px;
position : absolute;
}
.panel
{
height : 30px;
background-color : #FFFFFF;
margin : 30px;
font-family : 'Lato',serif;
font-weight : bold;
padding-top : 12px;
padding-bottom : 12px;
text-align : center;
}
</style>
</head>
<body id = "body_design">
<div id = "header">
<button id = "add">+</button>
</div>
<div id = "container" style = "border :2px solid #000000 "></div>
<script>
var sum = 0;
$(document).ready(function(){
$("#add").click(function(){
document.getElementById("container");
var addDiv = $('<div class = "module"></div>');
$("#container").append(addDiv);
sum = sum + 1;
for (var i = 0; i <= sum; i++)
{
var divInner = document.getElementsByClassName('module');
divInner[i].innerHTML = i+1;
$('<img class = "deletemodule" src="delete.png" width = "20" height = "20">').appendTo(divInner[i]);
$('<img class = "star "src="starBlack.png" width = "20" height = "20" >').appendTo(divInner[i]);
$('<div class = "dropModule"></div>').appendTo(divInner[i]);
$('<div class = "panel" display : "none"></div>').appendTo(divInner[i]);
$(".panel").hide();
//To change the color of the star
var starClick = document.getElementsByClassName('star');
$(starClick[i]).click(function(){
if($(this).attr('src') === 'starBlack.png')
{
$(this).attr('src','starGolden.png');
}
else
{
$(this).attr('src','starBlack.png');
}
});
//To make confirm element
var deleteBox = document.getElementsByClassName('deletemodule');
$(deleteBox[i]).click(function(){
if(confirm("Confirm:Delete Module") === true)
{
alert('po');
}
});
//To slide the module
var moduleInner = document.getElementsByClassName('dropModule');
var panel1 = document.getElementsByClassName('panel');
$(moduleInner[i]).click(function(){
{$(panel1[i]).show();
$('.panel').slideToggle();}
});
//To drag and drop module
}
});
});
</script>
</body>
</html>