게시물의 리스트 순서를 변경해야 합니다. 정보
게시물의 리스트 순서를 변경해야 합니다.
관련링크
본문
현재 만들어야 할 페이지가 게시판의 리스트를 불러와서
그 리스트의 순서를 변경한 후 다시 저장하면
그 변경한 순서대로 리스트를 불러오고 싶습니다.
요즘 블로그등에서 사용하는 카테고리 같은 기능이라고 보시면 쉬울듯 하구요
http://www.dhtmlgoodies.com/scripts/arrange-nodes/arrange-nodes.html
위와 같은 소스를 이용해서
리스트를 불러와서 저장하고 다시 저장한 리스트를 불러와서 수정하는
형태의 페이지를 제작하려 합니다.
고수분들의 도움부탁 드립니다. ㅠ.ㅠ
그 리스트의 순서를 변경한 후 다시 저장하면
그 변경한 순서대로 리스트를 불러오고 싶습니다.
요즘 블로그등에서 사용하는 카테고리 같은 기능이라고 보시면 쉬울듯 하구요
http://www.dhtmlgoodies.com/scripts/arrange-nodes/arrange-nodes.html
위와 같은 소스를 이용해서
리스트를 불러와서 저장하고 다시 저장한 리스트를 불러와서 수정하는
형태의 페이지를 제작하려 합니다.
고수분들의 도움부탁 드립니다. ㅠ.ㅠ
댓글 전체
그 사이트 소스 그대로 쓰시면 되겠는데요..
흠.. 능력이 구려서 어떻게 사용을 해야 할지를 모르겠어서요 ㅠ.ㅠ
http://sir.co.kr/bbs/board.php?bo_table=g4_qa&sop=and&sst=wr_last&sod=desc&sfl=&stx=&page=1
이런 거요?
이 게시판 타이틀 항목 중에서 "최근"이라고 있습니다.
이런 거요?
이 게시판 타이틀 항목 중에서 "최근"이라고 있습니다.
save 처리만 잘 하시면 되겠네요.
<html>
<head>
<title>Text arrange</title>
<style type="text/css">
body{
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
margin:0px;
padding:0px;
overflow:hidden;
padding-left:10px;
-moz-user-select:no;
}
img{
border:0px;
}
h1{
margin-bottom:5px;
}
/* Don't change these options */
#movableNode{
position:absolute;
}
#arrDestInditcator{
position:absolute;
display:none;
width:100px;
}
/* End options that shouldn't be changed */
#arrangableNodes,#movableNode ul{
padding-left:0px;
margin-left:0px;
margin-top:0px;
padding-top:0px;
}
#arrangableNodes li,#movableNode li{
list-style-type:none;
cursor:default;
}
</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 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 offsetYInsertDiv = -3; // Y offset for the little arrow indicating where the node should be inserted.
if(!document.all)offsetYInsertDiv = offsetYInsertDiv - 7; // No IE
var arrNodesDestination = false;
var insertAsFirstNode = 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 + Math.max(document.body.scrollTop,document.documentElement.scrollTop)) + '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 + Math.max(document.body.scrollTop,document.documentElement.scrollTop)) + 'px';
var tmpY = e.clientY + Math.max(document.body.scrollTop,document.documentElement.scrollTop);
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>');
}
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;
}
document.documentElement.onmouseup = arrangeNodeStopMove;
document.documentElement.onmousemove = arrangeNodeMove;
document.documentElement.onselectstart = cancelEvent;
}
window.onload = initArrangableNodes;
</script>
</head>
<body>
<div class="konaBody">
<H1>Arrange the nodes below by drag'n drop</H1>
</div>
<ul id="arrangableNodes">
<li id="node11">This is the title of an article</li>
<li id="node2">Sport news</li>
<li id="node5">Other news</li>
<li id="node15">Welcome to this website</li>
<li id="node3">Tab menu</li>
<li id="node6">Window scripts</li>
<li id="node14">DHTML dropdown menu</li>
<li id="node7">Scrolldown content</li>
<li id="node12">Misc scripts</li>
<li id="node1">Splash page</li>
<li id="node8">Arrange script</li>
<li id="node10">Autofit text</li>
<li id="node13">Slide down menu</li>
<li id="node4">Javascript calendar</li>
<li id="node9">Color picker</li>
</ul>
<p>
<a href="#" onclick="saveArrangableNodes();return false">Save</a>
</p>
<div id="movableNode"><ul></ul></div>
<div id="arrDestInditcator"><img src="images/insert.gif"></div>
<div id="arrDebug"></div>
<form>
<input type="hidden" name="hiddenNodeIds">
</form>
</body>
</html>
<html>
<head>
<title>Text arrange</title>
<style type="text/css">
body{
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
margin:0px;
padding:0px;
overflow:hidden;
padding-left:10px;
-moz-user-select:no;
}
img{
border:0px;
}
h1{
margin-bottom:5px;
}
/* Don't change these options */
#movableNode{
position:absolute;
}
#arrDestInditcator{
position:absolute;
display:none;
width:100px;
}
/* End options that shouldn't be changed */
#arrangableNodes,#movableNode ul{
padding-left:0px;
margin-left:0px;
margin-top:0px;
padding-top:0px;
}
#arrangableNodes li,#movableNode li{
list-style-type:none;
cursor:default;
}
</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 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 offsetYInsertDiv = -3; // Y offset for the little arrow indicating where the node should be inserted.
if(!document.all)offsetYInsertDiv = offsetYInsertDiv - 7; // No IE
var arrNodesDestination = false;
var insertAsFirstNode = 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 + Math.max(document.body.scrollTop,document.documentElement.scrollTop)) + '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 + Math.max(document.body.scrollTop,document.documentElement.scrollTop)) + 'px';
var tmpY = e.clientY + Math.max(document.body.scrollTop,document.documentElement.scrollTop);
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>');
}
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;
}
document.documentElement.onmouseup = arrangeNodeStopMove;
document.documentElement.onmousemove = arrangeNodeMove;
document.documentElement.onselectstart = cancelEvent;
}
window.onload = initArrangableNodes;
</script>
</head>
<body>
<div class="konaBody">
<H1>Arrange the nodes below by drag'n drop</H1>
</div>
<ul id="arrangableNodes">
<li id="node11">This is the title of an article</li>
<li id="node2">Sport news</li>
<li id="node5">Other news</li>
<li id="node15">Welcome to this website</li>
<li id="node3">Tab menu</li>
<li id="node6">Window scripts</li>
<li id="node14">DHTML dropdown menu</li>
<li id="node7">Scrolldown content</li>
<li id="node12">Misc scripts</li>
<li id="node1">Splash page</li>
<li id="node8">Arrange script</li>
<li id="node10">Autofit text</li>
<li id="node13">Slide down menu</li>
<li id="node4">Javascript calendar</li>
<li id="node9">Color picker</li>
</ul>
<p>
<a href="#" onclick="saveArrangableNodes();return false">Save</a>
</p>
<div id="movableNode"><ul></ul></div>
<div id="arrDestInditcator"><img src="images/insert.gif"></div>
<div id="arrDebug"></div>
<form>
<input type="hidden" name="hiddenNodeIds">
</form>
</body>
</html>