mirror of
https://github.com/Lastorder-DC/rhymix.git
synced 2026-01-14 00:39:57 +09:00
Drag&drop for Admin menu setup page
git-svn-id: http://xe-core.googlecode.com/svn/branches/1.5.0@8845 201d5d3c-b55e-5fd7-737f-ddc643e51545
This commit is contained in:
taggon
parent
2255974481
commit
734658d256
2 changed files with 182 additions and 5 deletions
|
|
@ -46,3 +46,180 @@ jQuery(function($){
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// menu - drag and drop
|
||||||
|
jQuery(function($){
|
||||||
|
|
||||||
|
var
|
||||||
|
dragging = false,
|
||||||
|
$holder = $('<li class="placeholder">');
|
||||||
|
|
||||||
|
$('div.adminMenu')
|
||||||
|
.delegate('li:not(.placeholder,.parent)', {
|
||||||
|
'mousedown.st' : function(event) {
|
||||||
|
var $this, $uls, $ul, width, height, offset, position, offsets, i, dropzone, wrapper='';
|
||||||
|
|
||||||
|
if($(event.target).is('a,input,label,textarea') || event.which != 1) return;
|
||||||
|
|
||||||
|
dragging = true;
|
||||||
|
|
||||||
|
$this = $(this);
|
||||||
|
height = $this.height();
|
||||||
|
width = $this.width();
|
||||||
|
$uls = $this.parentsUntil('.siteMap').filter('ul');
|
||||||
|
$ul = $uls.eq(-1);
|
||||||
|
|
||||||
|
$ul.css('position', 'relative');
|
||||||
|
|
||||||
|
position = {x:event.pageX, y:event.pageY};
|
||||||
|
offset = getOffset(this, $ul.get(0));
|
||||||
|
|
||||||
|
$clone = $this.clone(true).attr('target', true);
|
||||||
|
|
||||||
|
for(i=$uls.length-1; i; i--) {
|
||||||
|
$clone = $clone.wrap('<li><ul /></li>').parent().parent();
|
||||||
|
}
|
||||||
|
|
||||||
|
// get offsets of all list-item elements
|
||||||
|
offsets = [];
|
||||||
|
$ul.find('li').each(function(idx) {
|
||||||
|
if($this[0] === this || $this.has(this).length) return true;
|
||||||
|
|
||||||
|
var o = getOffset(this, $ul.get(0));
|
||||||
|
offsets.push({top:o.top, bottom:o.top+32, $item:$(this)});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Remove unnecessary elements from the clone, set class name and styles.
|
||||||
|
// Append it to the list
|
||||||
|
$clone
|
||||||
|
.find('.side,input').remove().end()
|
||||||
|
.addClass('draggable')
|
||||||
|
.css({
|
||||||
|
position: 'absolute',
|
||||||
|
opacity : .6,
|
||||||
|
width : width,
|
||||||
|
height : height,
|
||||||
|
left : offset.left,
|
||||||
|
top : offset.top,
|
||||||
|
zIndex : 100
|
||||||
|
})
|
||||||
|
.appendTo($ul.eq(0));
|
||||||
|
|
||||||
|
// Set a place holder
|
||||||
|
$holder
|
||||||
|
.css({
|
||||||
|
position:'absolute',
|
||||||
|
opacity : .6,
|
||||||
|
width : width,
|
||||||
|
height : '10px',
|
||||||
|
left : offset.left,
|
||||||
|
top : offset.top,
|
||||||
|
zIndex :99
|
||||||
|
})
|
||||||
|
.appendTo($ul.eq(0));
|
||||||
|
|
||||||
|
$this.css('opacity', .6);
|
||||||
|
|
||||||
|
$(document)
|
||||||
|
.unbind('mousemove.st mouseup.st')
|
||||||
|
.bind('mousemove.st', function(event) {
|
||||||
|
var diff, nTop, item, i, c, o;
|
||||||
|
|
||||||
|
dropzone = null;
|
||||||
|
|
||||||
|
diff = {x:position.x-event.pageX, y:position.y-event.pageY};
|
||||||
|
nTop = offset.top - diff.y;
|
||||||
|
|
||||||
|
for(i=0,c=offsets.length; i < c; i++) {
|
||||||
|
o = offsets[i];
|
||||||
|
if(o.top > nTop || o.bottom < nTop) continue;
|
||||||
|
|
||||||
|
dropzone = {element:o.$item};
|
||||||
|
if(o.$item.hasClass('parent')) {
|
||||||
|
dropzone.state = 'prepend';
|
||||||
|
$holder.css('top', o.bottom-5);
|
||||||
|
} else if(o.top > nTop - 12) {
|
||||||
|
dropzone.state = 'before';
|
||||||
|
$holder.css('top', o.top-5);
|
||||||
|
} else {
|
||||||
|
dropzone.state = 'after';
|
||||||
|
$holder.css('top', o.bottom-5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$clone.css({top:nTop});
|
||||||
|
})
|
||||||
|
.bind('mouseup.st', function(event) {
|
||||||
|
var $dropzone, $li;
|
||||||
|
|
||||||
|
dragging = false;
|
||||||
|
|
||||||
|
$(document).unbind('mousemove.st mouseup.st');
|
||||||
|
$this.css('opacity', '');
|
||||||
|
$clone.remove();
|
||||||
|
$holder.remove();
|
||||||
|
|
||||||
|
// dummy list item for animation
|
||||||
|
$li = $('<li />').height($this.height());
|
||||||
|
|
||||||
|
if(!dropzone) return;
|
||||||
|
$dropzone = $(dropzone.element);
|
||||||
|
|
||||||
|
$this.before($li);
|
||||||
|
|
||||||
|
if(dropzone.state == 'prepend') {
|
||||||
|
if(!$dropzone.find('>ul').length) $dropzone.find('>.side').after('<ul>');
|
||||||
|
$dropzone.find('>ul').prepend($this.hide());
|
||||||
|
} else {
|
||||||
|
$dropzone[dropzone.state]($this.hide());
|
||||||
|
}
|
||||||
|
|
||||||
|
$this.slideDown(100, function(){ $this.removeClass('active') });
|
||||||
|
$li.slideUp(100, function(){ var $par = $li.parent(); $li.remove(); if(!$par.children('li').length) $par.remove() });
|
||||||
|
});
|
||||||
|
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
'mouseover.st' : function() {
|
||||||
|
if(!dragging) $(this).addClass('active');
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
'mouseout.st' : function() {
|
||||||
|
if(!dragging) $(this).removeClass('active');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.find('li')
|
||||||
|
.prepend('<button type="button" class="moveTo">Move to</button>')
|
||||||
|
.filter('.parent')
|
||||||
|
.find('>button.moveTo').css({'visibility':'hidden','margin-left':'-12px'}).end()
|
||||||
|
.end()
|
||||||
|
.end()
|
||||||
|
|
||||||
|
$('<div id="dropzone-marker" />')
|
||||||
|
.css({display:'none',position:'absolute',backgroundColor:'#000',opacity:0.7})
|
||||||
|
.appendTo('body');
|
||||||
|
|
||||||
|
function getOffset(elem, offsetParent) {
|
||||||
|
var top = 0, left = 0;
|
||||||
|
|
||||||
|
while(elem && elem != offsetParent) {
|
||||||
|
top += elem.offsetTop;
|
||||||
|
left += elem.offsetLeft;
|
||||||
|
|
||||||
|
elem = elem.offsetParent;
|
||||||
|
}
|
||||||
|
|
||||||
|
return {top:top, left:left};
|
||||||
|
}
|
||||||
|
|
||||||
|
function setHolder(info, yPos) {
|
||||||
|
if(Math.abs(info.top-yPos) <= 10) {
|
||||||
|
$holder.css({top:info.top-10,height:'10px'});
|
||||||
|
return 'before';
|
||||||
|
} else if(Math.abs(info.bottom-yPos) <= 10) {
|
||||||
|
$holder.css({top:info.bottom-10,height:'10px'});
|
||||||
|
return 'after';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<load target="./js/menu_setup.js" />
|
<load target="./js/menu_setup.js" />
|
||||||
<load target="./js/sitemap.js" />
|
|
||||||
<div class="content" id="content">
|
<div class="content" id="content">
|
||||||
<div cond="$XE_VALIDATOR_MESSAGE" class="message {$XE_VALIDATOR_MESSAGE_TYPE}">
|
<div cond="$XE_VALIDATOR_MESSAGE" class="message {$XE_VALIDATOR_MESSAGE_TYPE}">
|
||||||
<p>{$XE_VALIDATOR_MESSAGE}</p>
|
<p>{$XE_VALIDATOR_MESSAGE}</p>
|
||||||
|
|
@ -10,18 +10,18 @@
|
||||||
<input type="hidden" name="menu_item_srl" value="" />
|
<input type="hidden" name="menu_item_srl" value="" />
|
||||||
<input type="hidden" name="success_return_url" value="{getUrl('', 'module', 'admin', 'act', 'dispAdminMenuSetup')}" />
|
<input type="hidden" name="success_return_url" value="{getUrl('', 'module', 'admin', 'act', 'dispAdminMenuSetup')}" />
|
||||||
<h1 class="h1">Admin Menu Setup</h1>
|
<h1 class="h1">Admin Menu Setup</h1>
|
||||||
<div class="portlet">
|
<div class="adminMenu portlet">
|
||||||
<h2 class="h2"><input value="Admin Menu" disabled /></h2>
|
<h2 class="h2"><input value="Admin Menu" disabled /></h2>
|
||||||
<ul class="lined">
|
<ul class="lined">
|
||||||
<!--@foreach($gnbUrlList AS $key=>$value)-->
|
<!--@foreach($gnbUrlList AS $key=>$value)-->
|
||||||
<li>
|
<li class="parent">
|
||||||
<input type="hidden" value="{$key}" class="_parent_key" />
|
<input type="hidden" value="{$key}" class="_parent_key" />
|
||||||
<input value="{$value['text']}" /> <span class="side"> <a href="#editMenu" class="modalAnchor _add">Add</a> | <a href="#delete" class="_parent_delete">Delete</a></span>
|
<span>{$value['text']}</span> <span class="side"><a href="#editMenu" class="modalAnchor _add">Add</a></span>
|
||||||
<!--@if(is_array($value['list']) && count($value['list'])>0)-->
|
<!--@if(is_array($value['list']) && count($value['list'])>0)-->
|
||||||
<ul>
|
<ul>
|
||||||
<!--@foreach($value['list'] AS $key2=>$value2)-->
|
<!--@foreach($value['list'] AS $key2=>$value2)-->
|
||||||
<input type="hidden" value="{$key2}" class="_child_key" />
|
<input type="hidden" value="{$key2}" class="_child_key" />
|
||||||
<li><input value="{$value2['text']}" /> <span class="side"><a href="#delete" class="_child_delete">Delete</a></span></li>
|
<li><span>{$value2['text']}</span><span class="side"><a href="#delete" class="_child_delete">Delete</a></span></li>
|
||||||
<!--@end-->
|
<!--@end-->
|
||||||
</ul>
|
</ul>
|
||||||
<!--@end-->
|
<!--@end-->
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue