我正在创建一个视图,用户可以拖动并克隆并为克隆元素分配ID,并且在单击要删除的元素时,我想为其分配一些值,以便可以将其存储在特定元素的数据库中。
它有来自一个div标签的2个div标签img标签被拖动并被克隆到另一个div标签。
HTML:
<head>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("jquery", "1.6.3");
google.load("jqueryui", "1.8.16");
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" />
<script src="dragndrop.js" type="text/javascript"></script>
<style type="text/css">
.col{
float:left;
padding: 5px 5px 5px 5px;
margin: 5px 5px 5px 5px;
}
#col1{
width:200px;
height:500px;
border:1px solid black;
}
.drag{
width:100px;
border:1px solid black;
height:40px;
position:relative;
background-color:red;
background-image:url(restaurant/8793_532242100147879_270911928_n.jpg);
}
#droppable{
width:500px;
height:500px;
border:1px solid black;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="col" id="col1">
<img src="" id="drag1" class="drag">
</div>
<div class="col" id="droppable">
</div>
</div>
</body>
JavaScript的:
$(document).ready(function () {
var x = null;
//Make element draggable
$(".drag").draggable({
helper: 'clone',
cursor: 'move',
tolerance: 'fit'
});
$("#droppable").droppable({
drop: function(e, ui) {
x = ui.helper.clone();
x.draggable({
helper: 'original',
containment: '#droppable',
tolerance: 'fit'
});
var droppableId = $(this).attr("id");
x.appendTo('#droppable');
ui.helper.remove();
}
});
});
这里我想为不同的克隆元素分配不同的ID,并在点击特定元素时我想分配值并将这些值存储到数据库中。我是新手,所以我不知道该怎么做。我尝试使用.attr
作为ID,但不知道它为什么不起作用。