我有拖放jquery。 Accordion允许用户将名称拖放到可放置区域。所以我想要做的是在用户点击提交后在新页面上显示删除的名称。但我不知道怎么做。我想也许它可以使用ajax但不确定如何完成。提前致谢。这是我的代码:
<link href="jquery-ui/jquery-ui.css" rel="stylesheet" />
<script src="jquery-ui/jquery.js"></script>
<script src="jquery-ui/jquery-ui.js"></script>
<script>
$(document).ready(function(){
$("#myAccordion"). accordion({heightStyle:"content", active: false, collapsible:true});
$(".source li").draggable({helper:"clone"});
$("#project ol").droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
drop: function(event, ui)
{
$(this).find(".placeholder").remove();
$("<li></li>").text(ui.draggable.text())
.addClass("project-item")
.addClass('dropClass')
.appendTo(this);
}
}).sortable({
items: "li:not(.placeholder)",
sort: function() {
$(this).removeClass("ui-state-default");
}
});
$("#myAccordion ul").droppable({
drop: function(event, ui) {
$(ui.draggable).remove();
},
hoverClass: "ui-state-hover",
accept: '.project-item'
});
$('#box').keyup(function(){
var valThis = $(this).val().toLowerCase();
if(valThis == ""){
$('.source > li').show();
} else {
$('.source > li').each(function(){
var text = $(this).text().toLowerCase();
(text.indexOf(valThis) >= 0) ? $(this).show() : $(this).hide();
});
};
});
});
</script>
<div id="myAccordion" style="width:20%; float:left; margin-right:30px;">
<?php for($i=321; $i<347; $i++)
{
echo "<h3>".chr($i)."</h3>";
echo '<ul class="source">';
$sql = "SELECT username FROM user WHERE username LIKE '".chr($i+32)."%' ";
$result = $conn->query($sql);
if ($result->num_rows > 0)
{
// output data of each row
while($row = $result->fetch_assoc())
{
$name= $row["username"];
echo"<li class='ui-state-highlight'>". $name ."</li>";
}
} else
{
echo "0 results";
}
echo '</ul>';
}
?>
</div>
<form class="formcss" method="POST" action="create3.php">
<fieldset style="background-color:white;">
<div id="project" style="margin-left:10%;">
<label>Leader:</label>
<ol>
<li class="placeholder" name="leader[]" <?php if (isset($leader[$i])) echo 'value="'.$leader[$i].'"' ?>>Add leaders and checkers here</li>
</ol>
<br><br>
<div class="row">
<input type = "submit" name ="submit" class="button" value = "Create Project" onclick="userSubmitted = true;"/>
</div>
</div>
</fieldset>
</form>