July 18th, 2007, 08:40 AM
|
|
Registered User
|
|
Join Date: Jul 2007
Posts: 3
Time spent in forums: 41 m 7 sec
Reputation Power: 0
|
|
|
Other - Ajax drag list question
hey everyone
i just made a sortable list with div's using ajax (scriptaculous) & php.
all works fine. but now i have a question.
is it possible to use an image in the div as some sort of anchor element , so you cannot drag & drop the div itself, but use the img to move the div ?
i've tried some stuff but it doesn't work..
here's my code
Code:
<?php
require_once('database.php');
require_once('menu.php');
if (!dbConnect()) {
echo 'Error connecting to database';
exit;
}
$navs = getMenu();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js"></script>
<style type="text/css">
.sortable-list {
list-style-type : none;
margin : 0;
padding:0px;
}
.sortable-list div {
border : 1px solid #000;
margin : 2px 0 2px 0;
padding : 3px;
background : #f7f7f7;
border : #ccc;
width : 400px;
}
.sortable-list img{
cursor:move;
}
</style>
</head>
<body>
<h1>testeuuuh</h1>
<div id="menuList" class="sortable-list">
<?php foreach ($navs as $nav_id => $name) { ?>
<div id="nav_<?= $nav_id ?>"> <img src="images/drag.gif"/><?= $name ?></div>
<?php } ?>
</div>
<div id="workingMsg" style="display:none;">Updating database...</div>
<script type="text/javascript">
function updateOrder(container)
{
var options = {
method : 'post',
parameters : Sortable.serialize("menuList")
};
new Ajax.Request('processor.php', options);
}
Sortable.create('menuList', {tag:'div', onUpdate : updateOrder });
</script>
</body>
</html>
thanx!
|
Dev Articles Community Forums Sponsor:
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
