だから私は「シンプルな」php + javascriptドラッグアンドドロップを作ろうとしています、これが私のコードです:
<title>Web Editor</title>
<?php
mysql_connect("$host","$user","$pass");
mysql_select_db("$db");
if(isset($_POST['submit'])){
$name=$_FILES['file']['name'];
$temp=$_FILES['file']['tmp_name'];
move_uploaded_file($temp,"uploaded/".$name);
$url="http://www.bluejayke.com/edit/uploaded/$name";
}
?>
<?php
if(isset($_POST['submit'])){
mysql_query("INSERT INTO uploadedvideos(id,name,url) VALUES('','$name','$url')");
echo "</br>" . $name . " uploaded";
}
$query="SELECT * FROM uploadedvideos";
$result = mysql_query($query);
?>
<div class='wrapper' id='wrapper'>
<table cellpadding="0" cellspacing="0" border="1">
<tr>
<td style="width:400px; height:50px;"><form action="index.php" method="POST" enctype="multipart/form-data">
<input type="file" name="file">
<input type="submit" name="submit" value="Upload">
</form></td>
</tr>
<tr>
<td style="width:400px; height:500px;">
<div style="width:100%; height:100%; overflow:auto; ">
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
</script>
<?php
while($row=mysql_fetch_array($result))
{
$id=$row['id'];
$name=$row['name'];
$url=$row['url'];
echo "<div style='position:absolute;cursor:pointer;' id='".$id."'><a href='javascript: click(\"$url\")'>$name</br><embed id='$id' src='$url' width='120' height='120' draggable='true' ondragstart='drag(event)'></embed></a><input type='button' id='delete' value='X' onclick='return Deleteqry($id)' /></div><br> ";
?>
<script type="text/javascript">
var dragging = false
$(function () {
var target<?php echo $id ?> = $('#<?php echo $id; ?>')
target<?php echo $id ?>.mousedown(function() { dragging<?php echo $id; ?> = true })
$(document).mouseup(function() { dragging<?php echo $id; ?> = false })
$(document).mousemove(function(e) {
if(dragging<?php echo $id; ?>){
target<?php echo $id ?>.css('left', e.pageX)
target<?php echo $id ?>.css('top', e.pageY)
}
})
})
</script>
<?php
}
?>
</div>
</table>
</div>
<div class='wactch' id='watching' height='480' width='720'>Loading..</div>
<script>
/*document.onmousemove=mouseMove;
function mouseMove(ev)
{
ev = ev || window.event;
var mousePos=mouseCords(ev);
}
function mouseCords(ev)
{
if(ev.pageX || ev.pageY)
{
return{x:ev.pageX,y:ev.pageY);
}
return
{
x:ev.clientX+document.body.scrollLeft-document.body.clientLeft, y:ev.clientY.document.body.scrollTop-document.body.clientTop
};
}
}*/
function Deleteqry(id)
{
if(confirm("Are you sure you want to delete this picture?")==true)
window.location="index.php?del="+id;
return false;
}
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
window.onload=function()
{
click("http://www.bluejayke.com/edit/uploaded/dpnewslogo.png");
}
function click(url)
{
document.getElementById("watching").innerHTML='<embed src="'+url+'" width=720 height=480></embed>';
}
</script>
<?php
if($_GET['del']){
$delete_id=$_GET['del'];
mysql_query("DELETE FROM `uploadedvideos` WHERE `uploadedvideos`.`id` = $delete_id");
header("location: index.php");
}
?>
<style type="text/css">
.wrapper
{
width:500px;
overflow: hidden;
float: left;
}
#watching {
float: right;
}
.div1 {width:750px;height:120px;padding:10px;border:1px solid #aaaaaa; oveflow: hidden;}
</style>
重要な部分は while ループにあります。このコードの結果は、while ループで作成したすべての div が、垂直線のような構造にしたい場合に、互いに積み上げられます。誰でもこれについて何か洞察がありますか？それはdivのスタイリングにあると思いますが、ドラッグアンドドロップ機能を維持しながら解決する方法がわかりません。