You will have to play with the style of the delete buttons to get them to look the way you want,
but this should work for all browsers.
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
/* Don't change these options */
#movableNode{
position:absolute;
}
#arrDestInditcator{
position:absolute;
display:none;
width:100px;
}
#p_up{
position:absolute;
top:150px;
left:250px;
width:350px;
padding:10px;
border:4px double #aaf;
text-align:center;
background:#ddf;
display:none;
}
#popup_q{
margin-bottom:20px;
}
.del_btn{
border:none;
background:none;
color:#00f;
cursor:pointer;
}
/* End options that shouldn't be changed */
</style>
<script type="text/javascript">
/************************************************************************************************************
(C) www.dhtmlgoodies.com, October 2005
This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.
Terms of use:
You are free to use this script as long as the copyright message is kept intact. However, you may not
redistribute, sell or repost it without our permission.
Thank you!
www.dhtmlgoodies.com
Alf Magne Kalleland
************************************************************************************************************/
var offsetYInsertDiv = -3; // Y offset for the little arrow indicating where the node should be inserted.
if(!document.all)offsetYInsertDiv = offsetYInsertDiv - 7; // No IE
var arrParent = false;
var arrMoveCont = false;
var arrMoveCounter = -1;
var arrTarget = false;
var arrNextSibling = false;
var leftPosArrangableNodes = false;
var widthArrangableNodes = false;
var nodePositionsY = new Array();
var nodeHeights = new Array();
var arrInsertDiv = false;
var insertAsFirstNode = false;
var arrNodesDestination = false;
var delParent = false;
function cancelEvent()
{
return false;
}
function getTopPos(inputObj)
{
var returnValue = inputObj.offsetTop;
while((inputObj = inputObj.offsetParent) != null){
returnValue += inputObj.offsetTop;
}
return returnValue;
}
function getLeftPos(inputObj)
{
var returnValue = inputObj.offsetLeft;
while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetLeft;
return returnValue;
}
function clearMovableDiv()
{
if(arrMoveCont.getElementsByTagName('LI').length>0){
if(arrNextSibling)arrParent.insertBefore(arrTarget,arrNextSibling); else arrParent.appendChild(arrTarget);
}
}
function initMoveNode(e)
{
clearMovableDiv();
if(document.all)e = event;
arrMoveCounter = 0;
arrTarget = this;
if(this.nextSibling)arrNextSibling = this.nextSibling; else arrNextSibling = false;
timerMoveNode();
arrMoveCont.parentNode.style.left = e.clientX + 'px';
arrMoveCont.parentNode.style.top = e.clientY + 'px';
return false;
}
function timerMoveNode()
{
if(arrMoveCounter>=0 && arrMoveCounter<10){
arrMoveCounter = arrMoveCounter +1;
setTimeout('timerMoveNode()',20);
}
if(arrMoveCounter>=10){
arrMoveCont.appendChild(arrTarget);
}
}
function arrangeNodeMove(e)
{
if(document.all)e = event;
if(arrMoveCounter<10)return;
if(document.all && arrMoveCounter>=10 && e.button!=1 && navigator.userAgent.indexOf('Opera')==-1){
arrangeNodeStopMove();
}
arrMoveCont.parentNode.style.left = e.clientX + 'px';
arrMoveCont.parentNode.style.top = e.clientY + 'px';
var tmpY = e.clientY;
arrInsertDiv.style.display='none';
arrNodesDestination = false;
if(e.clientX<leftPosArrangableNodes || e.clientX>leftPosArrangableNodes + widthArrangableNodes)return;
var subs = arrParent.getElementsByTagName('LI');
for(var no=0;no<subs.length;no++){
var topPos =getTopPos(subs[no]);
var tmpHeight = subs[no].offsetHeight;
if(no==0){
if(tmpY<=topPos && tmpY>=topPos-5){
arrInsertDiv.style.top = (topPos + offsetYInsertDiv) + 'px';
arrInsertDiv.style.display = 'block';
arrNodesDestination = subs[no];
insertAsFirstNode = true;
return;
}
}
if(tmpY>=topPos && tmpY<=(topPos+tmpHeight)){
arrInsertDiv.style.top = (topPos+tmpHeight + offsetYInsertDiv) + 'px';
arrInsertDiv.style.display = 'block';
arrNodesDestination = subs[no];
insertAsFirstNode = false;
return;
}
}
}
function arrangeNodeStopMove()
{
arrMoveCounter = -1;
arrInsertDiv.style.display='none';
if(arrNodesDestination){
var subs = arrParent.getElementsByTagName('LI');
if(arrNodesDestination==subs[0] && insertAsFirstNode){
arrParent.insertBefore(arrTarget,arrNodesDestination);
}else{
if(arrNodesDestination.nextSibling){
arrParent.insertBefore(arrTarget,arrNodesDestination.nextSibling);
}else{
arrParent.appendChild(arrTarget);
}
}
}
arrNodesDestination = false;
clearMovableDiv();
}
function saveArrangableNodes()
{
var nodes = arrParent.getElementsByTagName('LI');
var string = "";
for(var no=0;no<nodes.length;no++){
if(string.length>0)string = string + ',';
string = string + nodes[no].id;
}
document.forms[0].hiddenNodeIds.value = string;
// Just for testing
document.getElementById('arrDebug').innerHTML = 'Ready to save these nodes:<br>' + string.replace(/,/g,',<BR>');
document.forms[0].submit(); // Remove the comment in front of this line when you have set an action to the form.
}
function initArrangableNodes()
{
arrParent = document.getElementById('arrangableNodes');
arrMoveCont = document.getElementById('movableNode').getElementsByTagName('UL')[0];
arrInsertDiv = document.getElementById('arrDestInditcator');
leftPosArrangableNodes = getLeftPos(arrParent);
arrInsertDiv.style.left = leftPosArrangableNodes - 5 + 'px';
widthArrangableNodes = arrParent.offsetWidth;
var subs = arrParent.getElementsByTagName('LI');
for(var no=0;no<subs.length;no++){
subs[no].onmousedown = initMoveNode;
subs[no].onselectstart = cancelEvent;
var btn = subs[no].getElementsByTagName('button');
btn[0].onmousedown = del_elm;
}
document.documentElement.onmouseup = arrangeNodeStopMove;
document.documentElement.onmousemove = arrangeNodeMove;
document.documentElement.onselectstart = cancelEvent;
}
function del_elm(){
document.getElementById("p_up").style.display = "block";
delParent = this.parentNode;
document.getElementById("node_name").innerHTML = delParent.childNodes[0].nodeValue;
}
function del_elm1(v){
if(v=="y"){
arrParent.removeChild(delParent);
document.getElementById("p_up").style.display = "none";
}
if(v=="n"){
document.getElementById("p_up").style.display = "none";
}
}
window.onload = initArrangableNodes;
</script>
</head>
<body>
<div class="konaBody">
<H1>Arrange the "Articles" below by drag'n drop</H1>
</div>
<ul id="arrangableNodes">
<li id="node1">Node no. 1 <Button class="del_btn">Delete</button></li>
<li id="node2">Node no. 2 <Button class="del_btn">Delete</button></li>
<li id="node3">Node no. 3 <Button class="del_btn">Delete</button></li>
<li id="node4">Node no. 4 <Button class="del_btn">Delete</button></li>
<li id="node5">Node no. 5 <Button class="del_btn">Delete</button></li>
<li id="node6">Node no. 6 <Button class="del_btn">Delete</button></li>
<li id="node7">Node no. 7 <Button class="del_btn">Delete</button></li>
<li id="node8">Node no. 8 <Button class="del_btn">Delete</button></li>
<li id="node9">Node no. 9 <Button class="del_btn">Delete</button></li>
<li id="node10">Node no. 10 <Button class="del_btn">Delete</button></li>
<li id="node11">Node no. 11 <Button class="del_btn">Delete</button></li>
<li id="node12">Node no. 12 <Button class="del_btn">Delete</button></li>
<li id="node13">Node no. 13 <Button class="del_btn">Delete</button></li>
<li id="node14">Node no. 14 <Button class="del_btn">Delete</button></li>
<li id="node15">Node no. 15 <Button class="del_btn">Delete</button></li>
</ul>
<p>
<a href="javascript:;" onclick="saveArrangableNodes();return false">Save</a>
</p>
<div id="movableNode"><ul></ul></div>
<div id="arrDestInditcator"><img src="insert.gif"></div>
<div id="arrDebug"></div>
<form method="post" action="http://localhost/7sac/music.php?action=test">
<input type="hidden" name="hiddenNodeIds">
<input name="name" value="">
</form>
<div id="p_up">
<div id="popup_q">Are you sure you want to delete <span id="node_name"></span> ?</div>
<button onclick="del_elm1('y');">OK</button> <Button onclick="del_elm1('n');">Cancel</button>
</div>
</body>
</html>
Linear Mode
