Hi!
I'm trying to create a file browser - similar to windows explorer but for the web. I want to be able to move a file into a folder and for this I'm using the jQuery UI library. The code I have so far is this (I haven't made any of the AJAX scripting yet) (if you want to help me solve the problem you can just copy the whole code into a html-document and it will work):
<!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=utf-8" />
<title>test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<style>
* {margin: 0; padding: 0;}
div#folder {width: 800px; height:800px; overflow: hidden; border: 2px solid #CCC; padding: 5px;}
div#folder ul li {width: 150px; height: 200px; float: left; margin: 5px; list-style:none; background:#ccc;}
div#folder ul li div {width: 140px; height: 190px; overflow:hidden; background:#0cf; border: 3px solid #09f; cursor: pointer;}
div#folder .ui-selecting { background: #FECA40; }
div#folder .ui-selected { background: #F39814; color: white; }
span.type {display:none;}
</style>
<script>
$(document).ready(function(){
$(function() {
var selected;
var selectedId;
var currentId;
var type;
$("div#folder ul li div").draggable({
start: function(event, ui){
selected = $(this).parents('li');
selectedId = selected.attr('id');
},
containment: 'div#folder',
revert: 'valid',
revertDuration: 100,
delay: 50,
opacity: 0.5
});
$("div#folder ul li").droppable({
over: function(event, ui){
currentId = $(this).attr('id');
type = $(this).children('div').children('span').html();
if (selectedId != currentId && type == 'folder'){
$(this).children('div').css('background', 'lightgreen');
}
},
out: function(event, ui){
$(this).children('div').css('background', '#0cf');
},
drop: function(event, ui){
if (type == 'folder'){
if (selectedId != currentId) selected.remove();
}
$(this).children('div').css('background', '#0cf');
}
});
$("div#folder").droppable({});
//$("div#folder").selectable();
//$("div#folder").disableSelection();
});
});
</script>
</head>
<body>
<div id="folder">
<ul>
<li id="0">
<div>
<span class="type">folder</span>
FOLDER
</div>
</li>
<li id="1">
<div>
<span class="type">folder</span>
FOLDER
</div>
</li>
<li id="2">
<div>
<span class="type">file</span>
FILE
</div>
</li>
<li id="3">
<div>
<span class="type">file</span>
FILE
</div>
</li>
<li id="4">
<div>
<span class="type">file</span>
FILE
</div>
</li>
</ul>
</div>
</body>
</html>Everything works as I want it too except when I put a file (or a folder) into a folder. Then everything stops working as it should. Now when I move an item in the browser it won't return to it's default position when the mouse button is released. I just can't figure out why it won't. If you are used to working with jQuery UI you could also help me make the items sortable and selectable :)
Thanks in advance for all the help I might get!
Edit:
I just noticed that it can be done by setting 'display: none' instead of removing the element, but that doesn't seem as professional to me. I still need help with making selectable and sortable work though...