chips5k · August 8, 2016 21:26
diff --git a/Nested Tree Drag drop b/Nested Tree Drag drop
 <!doctype html>
 <html>

    <head>
        <script   src="https://code.jquery.com/jquery-1.8.2.min.js"   integrity="sha256-9VTS8JJyxvcUR+v+RTLTsd0ZWbzmafmlzMmeZO9RFyk="   crossorigin="anonymous"></script>
    </head>

    <style>
        .dd-tree {
            padding:5px;
        }
        .dd-tree ul {
            display:block;
        }

        .dd-tree li {
            display:block;
            margin:5px;
        }

        .no-select {
            -webkit-touch-callout: none; /* iOS Safari */
            -webkit-user-select: none;   /* Chrome/Safari/Opera */
            -khtml-user-select: none;    /* Konqueror */
            -moz-user-select: none;      /* Firefox */
            -ms-user-select: none;       /* Internet Explorer/Edge */
            user-select: none;           /* Non-prefixed version, currently
                                            not supported by any browser */
        }

        .target {
            /*background: #eee;*/
        }
        
        .dd-tree .item {
            display:block;
            width:100%;
            padding:5px;
            border:1px solid #ccc;
            border-radius: 5px;
        }

        .placeholder{
            border:1px dashed #ccc;
            background: #f7f7f7;
            border-radius:5px;
            padding:5px;
            min-height: 24px;
        }

    </style>

    <body>

    <div class="dd-tree">
        <ul>
            <li><span class="item">Item 1</span>

                <ul>
                    <li><span class="item">Item 1a</span></li>
                    <li><span class="item">Item 1b</span></li>
                    <li><span class="item">Item 1c</span></li>
                </ul>

            </li>
            <li><span class="item">Item 2</span>


            </li>
            <li><span class="item">Item 3</span>

                <ul>
                    <li><span class="item">Item 3a</span></li>
                    <li><span class="item">Item 3b</span></li>
                    <li><span class="item">Item 3c</span></li>
                </ul>

            </li>
        </ul>
        <div id="helper" style="position:absolute; border:1px solid red; background: blue;display:none">123</div>
        <ul style="display:none"><li class="placeholder"></li></ul>
    </div>
        

        <script>

            

            $(document).ready(function() {

                var placeholder = $('.dd-tree li.placeholder');
                  
                var helper = $('#helper');

                var draggable = null;
                var droppable = null;

                $('.dd-tree').on('mousedown', '.item', function(e) {
                    
                    if(e.button === 0){
                        draggable = $(this).parent('li');
                        placeholder.insertBefore(draggable).show();
                        helper.html(draggable.html());
                        helper.show().css({
                            top: e.pageY + 10, left: e.pageX + 10
                        });
                        $('.dd-tree .item').addClass('no-select');
                        draggable.hide();
                    }
                });

                $('.dd-tree').on('mousemove', function(e) {
                    
                    if(draggable !== null) {
                        
                        helper.css({
                            top: e.pageY + 10, left: e.pageX + 10
                        });
                    }
                });

                $('.dd-tree').on('mouseup', function(e) {
                   if(e.button === 0){
                        placeholder.replaceWith(draggable);
                        draggable.show();
                        droppable = null;
                        draggable = null;
                        helper.hide();
                        $('.dd-tree li').removeClass('no-select');
                   }
                });

                $('.dd-tree').on('mouseover', '.item', function(e) {
                    if(draggable !== null) {
                        droppable = $(this).parent('li');
                        droppable.addClass('target');
                        lastDroppableOver = null;
                        if(droppable.find('>ul').length == 0){
                            droppable.append('<ul></ul>');
                        }

                        placeholder.prependTo(droppable.find('>ul'));
                        placeholder.show();
                    } else {
                        placeholder.hide();
                    }
                });

                $('.dd-tree').on('mouseleave', '.item', function(e) {
                    if(droppable !== null) {

                        if(e.clientY > droppable.offset().top) {
                            placeholder.insertAfter(droppable);
                        } else {
                            placeholder.insertBefore(droppable);
                           
                        }
                        placeholder.show();
                        droppable.removeClass('target');
                        droppable = null;
                    }
                });

                $('body').on('mouseleave', '.dd-tree', function(e) {
                    e.stopPropagation();
                    if(draggable) { draggable.show(); }
                    helper.hide();
                    placeholder.hide();
                    draggable = null;
                    droppable = null;
                });
                



            });

        </script>

    </body>

 </html>
	<!doctype html>
	<html>

	<head>
	<script src="https://code.jquery.com/jquery-1.8.2.min.js" integrity="sha256-9VTS8JJyxvcUR+v+RTLTsd0ZWbzmafmlzMmeZO9RFyk=" crossorigin="anonymous"></script>
	</head>

	<style>
	.dd-tree {
	padding:5px;
	}
	.dd-tree ul {
	display:block;
	}

	.dd-tree li {
	display:block;
	margin:5px;
	}

	.no-select {
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Chrome/Safari/Opera */
	-khtml-user-select: none; /* Konqueror */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently
	not supported by any browser */
	}

	.target {
	/background: #eee;/
	}

	.dd-tree .item {
	display:block;
	width:100%;
	padding:5px;
	border:1px solid #ccc;
	border-radius: 5px;
	}

	.placeholder{
	border:1px dashed #ccc;
	background: #f7f7f7;
	border-radius:5px;
	padding:5px;
	min-height: 24px;
	}

	</style>

	<body>

	<div class="dd-tree">
	<ul>
	<li><span class="item">Item 1</span>

	<ul>
	<li><span class="item">Item 1a</span></li>
	<li><span class="item">Item 1b</span></li>
	<li><span class="item">Item 1c</span></li>
	</ul>

	</li>
	<li><span class="item">Item 2</span>


	</li>
	<li><span class="item">Item 3</span>

	<ul>
	<li><span class="item">Item 3a</span></li>
	<li><span class="item">Item 3b</span></li>
	<li><span class="item">Item 3c</span></li>
	</ul>

	</li>
	</ul>
	<div id="helper" style="position:absolute; border:1px solid red; background: blue;display:none">123</div>
	<ul style="display:none"><li class="placeholder"></li></ul>
	</div>


	<script>



	$(document).ready(function() {

	var placeholder = $('.dd-tree li.placeholder');

	var helper = $('#helper');

	var draggable = null;
	var droppable = null;

	$('.dd-tree').on('mousedown', '.item', function(e) {

	if(e.button === 0){
	draggable = $(this).parent('li');
	placeholder.insertBefore(draggable).show();
	helper.html(draggable.html());
	helper.show().css({
	top: e.pageY + 10, left: e.pageX + 10
	});
	$('.dd-tree .item').addClass('no-select');
	draggable.hide();
	}
	});

	$('.dd-tree').on('mousemove', function(e) {

	if(draggable !== null) {

	helper.css({
	top: e.pageY + 10, left: e.pageX + 10
	});
	}
	});

	$('.dd-tree').on('mouseup', function(e) {
	if(e.button === 0){
	placeholder.replaceWith(draggable);
	draggable.show();
	droppable = null;
	draggable = null;
	helper.hide();
	$('.dd-tree li').removeClass('no-select');
	}
	});

	$('.dd-tree').on('mouseover', '.item', function(e) {
	if(draggable !== null) {
	droppable = $(this).parent('li');
	droppable.addClass('target');
	lastDroppableOver = null;
	if(droppable.find('>ul').length == 0){
	droppable.append('<ul></ul>');
	}

	placeholder.prependTo(droppable.find('>ul'));
	placeholder.show();
	} else {
	placeholder.hide();
	}
	});

	$('.dd-tree').on('mouseleave', '.item', function(e) {
	if(droppable !== null) {

	if(e.clientY > droppable.offset().top) {
	placeholder.insertAfter(droppable);
	} else {
	placeholder.insertBefore(droppable);

	}
	placeholder.show();
	droppable.removeClass('target');
	droppable = null;
	}
	});

	$('body').on('mouseleave', '.dd-tree', function(e) {
	e.stopPropagation();
	if(draggable) { draggable.show(); }
	helper.hide();
	placeholder.hide();
	draggable = null;
	droppable = null;
	});




	});

	</script>

	</body>

	</html>