Здравствуйте!
Помогите пожалуйста реализовать возможность переноса одних веток в другие с помощью Drag And Drop. У самого ни в какую не получается( Исходный код привожу на странице.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Примеры для статьи о древовидных списках</title>
<!-- CSS -->
<style type="text/css">
@charset "utf-8";
/* Списки */
ul, ol { padding-left:2.5em; }
ul ul { margin-top:.5em; margin-bottom:.5em; }
ol ol { margin-top:.5em; margin-bottom:.5em; }
ul ol { margin-top:.5em; margin-bottom:.5em; }
ol ul { margin-top:.5em; margin-bottom:.5em; }
ol li {
list-style-image:none;
list-style-position:outside;
margin-top:.5em;
margin-bottom:.5em;
}
/* обычный */
ul li {
list-style-image:none;
list-style-position:outside;
list-style-type:disc;
margin-top:.5em;
margin-bottom:.5em;
}
ul > li > ul > li { list-style-type:circle; }
ul > li > ul > li > ul > li { list-style-type:square; }
/* стилизованные */
ul.li-arrow, ul.li-arrow2, ul.li-check, ul.li-circle, ul.li-dash, ul.li-square, ul.li-star {
padding-left:1.4em;
}
ul.li-arrow > li, ul.li-arrow2 > li, ul.li-check > li, ul.li-circle > li, ul.li-dash > li, ul.li-square > li, ul.li-star > li {
padding-left:1.1em;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
background-repeat:no-repeat;
background-position:0 .2em;
}
/* кружок */
ul.li-circle > li { background-image:url(/theme/img/li-circle.png); }
/* стрелка */
ul.li-arrow > li { background-image:url(/theme/img/li-arrow.png); }
/* стрелка2 */
ul.li-arrow2 > li { background-image:url(/theme/img/li-arrow2.png); }
/* галка */
ul.li-check > li { background-image:url(/theme/img/li-check.png); }
/* тирэ */
ul.li-dash > li { background-image:url(/theme/img/li-dash.png); }
/* квадрат */
ul.li-square > li { background-image:url(/theme/img/li-square.png); }
/* star */
ul.li-star > li { background-image:url(/theme/img/li-star.png); }
/* бланк */
ul.li-blank { padding-left:0; }
ul.li-blank > li { padding-left:0; list-style-image:none; list-style-position:outside; list-style-type:none; background-image:none; }
/* отчеркнутый */
ul.li-line { padding-left:0; }
ul.li-line > li { padding-left:0; list-style-image:none; list-style-position:outside; list-style-type:none; background-image:none; border-bottom:solid 1px #000000; padding-bottom:.25em; margin-bottom:.25em; margin-top:.25em; }
ul.li-line > li:last-child { border-bottom:none; }
/* ul-treefree */
ul.ul-treefree { padding-left:25px; }
ul.ul-treefree ul { margin:0; padding-left:6px; }
ul.ul-treefree li { position:relative; list-style:none outside none; border-left:solid 1px #999; margin:0; padding:0 0 0 19px; line-height:23px; }
ul.ul-treefree li:before { content:''; display:block; border-bottom:solid 1px #999; position:absolute; width:18px; height:11px; left:0; top:0; }
ul.ul-treefree li:last-child { border-left:0 none; }
ul.ul-treefree li:last-child:before { border-left:solid 1px #999; }
/* ul-dropfree */
ul.ul-dropfree div.drop {
width:11px;
height:11px;
position:absolute;
z-index:10;
top:6px;
left:-6px;
/*background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAJCAYAAAA/33wPAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAGRJREFUeNqsktsOwCAIQ9vF//9l5g1nmAMe1gc15kihEQAEQ94eMuxrFT7EqgxzbVX10nJimYOkFWIAMcMUdds70fOcRpxuF1Om24qgwSYOPm8k7sibH7HeGR1cmczxn390CzAAwzs5/LlqBVoAAAAASUVORK5CYII=');*/
/*background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAALCAYAAAB7/H1+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAGtJREFUeNrck8EOwCAIQ9vF///lTjdniIEMDrusB43xgQUiAAi3Mnua5bV24UXsqrCHecVeeLw8NpBGYiZhVthWcYG81KYL7eXb82wr12AYG3/Y5djOZAQ6M9IW/LMeu46DUlms7pufdwowAAbFQP9vY58OAAAAAElFTkSuQmCC');*/
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAALCAIAAAD0nuopAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE1JREFUeNpinDlzJgNlgAWI09LScEnPmjWLoAImrHpIAkwMFAMqGMGC6X44GzkIsHoQooAFTTVQKdbAwxOigyMsmIh3MC7ASHnqBAgwAD4CGeOiDhXRAAAAAElFTkSuQmCC');
background-position:-11px 0;
background-repeat:no-repeat;
cursor:pointer;
}
/* ul-tree */
ul.ul-tree { padding-left:2em; padding-bottom:12px; }
ul.ul-tree ul { margin:0; padding-left:17px; }
ul.ul-tree li { position:relative; list-style:none outside none; border-left:1px solid rgba(0,0,0,.5); margin:0; line-height:24px; }
ul.ul-tree p { position:relative; top:12px; margin:0 0 0 2.5em; padding:0 0; }
ul.ul-tree p:before { content:''; display:block; border-bottom:1px solid rgba(0,0,0,.5); position:absolute; width:2.5em; height:24px; left:-2.5em; top:-12px; }
ul.ul-tree li:last-child { border-left:0 none; }
ul.ul-tree li:last-child > p:before { border-left:solid 1px rgba(0,0,0,.5); }
/* ul-drop */
ul.ul-drop div.drop {
width:11px;
height:11px;
position:absolute;
z-index:10;
top:19px;
left:12px;
/*background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAJCAYAAAA/33wPAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAGRJREFUeNqsktsOwCAIQ9vF//9l5g1nmAMe1gc15kihEQAEQ94eMuxrFT7EqgxzbVX10nJimYOkFWIAMcMUdds70fOcRpxuF1Om24qgwSYOPm8k7sibH7HeGR1cmczxn390CzAAwzs5/LlqBVoAAAAASUVORK5CYII=');*/
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAALCAYAAAB7/H1+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAGtJREFUeNrck8EOwCAIQ9vF///lTjdniIEMDrusB43xgQUiAAi3Mnua5bV24UXsqrCHecVeeLw8NpBGYiZhVthWcYG81KYL7eXb82wr12AYG3/Y5djOZAQ6M9IW/LMeu46DUlms7pufdwowAAbFQP9vY58OAAAAAElFTkSuQmCC');
background-position:-11px 0;
background-repeat:no-repeat;
cursor:pointer;
}
/* reset */
* { margin:0; padding:0; }
/* main */
#page {
width:1176px;
padding:0 12px;
margin:0 auto;
}
@media screen and (max-width: 1200px) {
#page {
width: 98%;
padding:0 1%;
}
</style>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- JS -->
<script type="text/javascript">
$(document).ready(function(){
$(".ul-dropfree").find("li:has(ul)").prepend('<div class="drop"></div>');
$(".ul-dropfree div.drop").click(function() {
if ($(this).nextAll("ul").css('display')=='none') {
$(this).nextAll("ul").slideDown(400);
$(this).css({'background-position':"-11px 0"});
} else {
$(this).nextAll("ul").slideUp(400);
$(this).css({'background-position':"0 0"});
}
});
$(".ul-dropfree").find("ul").slideUp(400).parents("li").children("div.drop").css({'background-position':"0 0"});
$(".ul-drop").find("li:has(ul)").prepend('<div class="drop"></div>');
$(".ul-drop div.drop").click(function() {
if ($(this).nextAll("ul").css('display')=='none') {
$(this).nextAll("ul").slideDown(400);
$(this).css({'background-position':"-11px 0"});
} else {
$(this).nextAll("ul").slideUp(400);
$(this).css({'background-position':"0 0"});
}
});
$(".ul-drop").find("ul").slideUp(400).parents("li").children("div.drop").css({'background-position':"0 0"});
$(".lasttreedrophide").click(function(){
$("#lasttree").find("ul").slideUp(400).parents("li").children("div.drop").css({'background-position':"0 0"});
});
$(".lasttreedropshow").click(function(){
$("#lasttree").find("ul").slideDown(400).parents("li").children("div.drop").css({'background-position':"-11px 0"});
});
});
</script>
</head>
<body>
<div id="page" style="padding-top:40px;">
<h3>Задание</h3>
<ul class="ul-tree ul-drop" id="lasttree" style="display:block">
<li><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<ul>
<li><p>Aenean commodo ligula eget dolor.</p></li>
<li><p>Aenean massa.</p>
<ul>
<li><p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p></li>
<li><p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p></li>
<li><p>Nulla consequat massa quis enim.</p></li>
</ul>
</li>
</ul>
</li>
<li><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<ul>
<li><p>Aenean commodo ligula eget dolor.</p></li>
<li><p>Aenean massa.</p>
<ul>
<li><p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p></li>
<li><p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p></li>
<li><p>Nulla consequat massa quis enim.</p></li>
</ul>
</li>
</ul>
</li>
<li><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<ul>
<li><p>Aenean commodo ligula eget dolor.</p></li>
<li><p>Aenean massa.</p>
<ul>
<li><p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p></li>
<li><p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p></li>
<li><p>Nulla consequat massa quis enim.</p></li>
</ul>
</li>
</ul>
</li>
<li><p>Duis leo.</p></li>
</ul>
</body>
</html>
