jongpak/folder_drag.html

## folder_drag.html
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI - nested list exclusive drag/drop</title>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
    $(function() {
        $('.menu').droppable({
            accept: '.folder li',
            drop: function(event, ui) {
                $(ui.draggable).appendTo(this);
            }
        });

        $('.folder').droppable({
            greedy: true,
            drop: function(event, ui) {
                var srcParent = ui.draggable.closest('ul')[0];
                var dstParent = $(event.target).closest('ul')[0];

                if(srcParent == dstParent) {
                    return;
                }

                $(ui.draggable).appendTo(dstParent);
            }
        });

        $('.folder li').draggable({
            revert: true
        });

        $(".menu > li:not(:has(ul))").draggable({
            revert: true,
            start: function() {
                console.log('d');
            },
        });
    });
    </script>
    <style>
        .folder.ui-droppable-hover { background: rgba(255, 255, 0, 0.5); }

        .menu ul {
            border: 1px solid;
            margin: 5px;
        }
    </style>
</head>
<body>

<ul class="menu">
    <li>
        <ul class="folder">
            <li><span style="color: blue">Folder 1-1</span></li>
            <li><span style="color: blue">Folder 1-2</span></li>
            <li><span style="color: blue">Folder 1-3</span></li>
            <li><span style="color: blue">Folder 1-4</span></li>
            <li><span style="color: blue">Folder 1-5</span></li>
        </ul>
    </li>
    <li>
        <ul class="folder">
            <li><b>Folder 2-1</b></li>
            <li><b>Folder 2-2</b></li>
            <li><b>Folder 2-3</b></li>
            <li><b>Folder 2-4</b></li>
            <li><b>Folder 2-5</b></li>
        </ul>
    </li>
    <li><span style="color: red">Item 1</span></li>
    <li><span style="color: red">Item 2</span></li>
    <li><span style="color: red">Item 3</span></li>
    <li><span style="color: red">Item 4</span></li>
    <li><span style="color: red">Item 5</span></li>
</ul>
</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery UI - nested list exclusive drag/drop</title>
	<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
	<script>
	$(function() {
	$('.menu').droppable({
	accept: '.folder li',
	drop: function(event, ui) {
	$(ui.draggable).appendTo(this);
	}
	});

	$('.folder').droppable({
	greedy: true,
	drop: function(event, ui) {
	var srcParent = ui.draggable.closest('ul')[0];
	var dstParent = $(event.target).closest('ul')[0];

	if(srcParent == dstParent) {
	return;
	}

	$(ui.draggable).appendTo(dstParent);
	}
	});

	$('.folder li').draggable({
	revert: true
	});

	$(".menu > li:not(:has(ul))").draggable({
	revert: true,
	start: function() {
	console.log('d');
	},
	});
	});
	</script>
	<style>
	.folder.ui-droppable-hover { background: rgba(255, 255, 0, 0.5); }

	.menu ul {
	border: 1px solid;
	margin: 5px;
	}
	</style>
	</head>
	<body>

	<ul class="menu">
	<li>
	<ul class="folder">
	<li><span style="color: blue">Folder 1-1</span></li>
	<li><span style="color: blue">Folder 1-2</span></li>
	<li><span style="color: blue">Folder 1-3</span></li>
	<li><span style="color: blue">Folder 1-4</span></li>
	<li><span style="color: blue">Folder 1-5</span></li>
	</ul>
	</li>
	<li>
	<ul class="folder">
	<li><b>Folder 2-1</b></li>
	<li><b>Folder 2-2</b></li>
	<li><b>Folder 2-3</b></li>
	<li><b>Folder 2-4</b></li>
	<li><b>Folder 2-5</b></li>
	</ul>
	</li>
	<li><span style="color: red">Item 1</span></li>
	<li><span style="color: red">Item 2</span></li>
	<li><span style="color: red">Item 3</span></li>
	<li><span style="color: red">Item 4</span></li>
	<li><span style="color: red">Item 5</span></li>
	</ul>
	</body>
	</html>