All geek questions in one place

JQuery draggable and droppable with scroll on draggable ul

Current output

current output

Expected Result expected output

As you can see from the first image, draggable ul li is located to the right of the area with the ability to click.

When I get the contents from the database, there will be n number of elements that I will have in ul mode with drag and drop.

But when I try to put height : 800px and overflow-x : scroll in drag-able ul , I can’t see the elements that are already discarded in the deleteable area.

for reference, here is the code

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>New Web Project</title> <script src="jquery/js/jquery-1.9.1.js"></script> <script src="jquery/js/jquery-cookie.js"></script> <script src="jquery/js/jquery-ui-1.10.3.custom.min.js"></script> <link rel="stylesheet" href="jquery/css/ui-lightness/jquery-ui-1.10.3.custom.min.css"> <style> .arialView { background-color: #999999; background-image: url("Chrysanthemum.jpg"); background-position: center center; background-repeat: no-repeat; height: 800px; width: 1200px; float: left; } .arialViewOptions { list-style: none; padding: 0px; margin: 0px; float: left; border-left: 1px solid #000; } .arialViewOptions li { padding: 5px; } </style> </head> <body> <h1>New Web Project Page</h1> <div class="arialView"> &nbsp; </div> <ul class="arialViewOptions"> <li id="1"> AA </li> <li id="2"> BB </li> <li id="3"> CC </li> <li id="4"> DD </li> <li id="5"> EE </li> <li id="6"> FF </li> <li id="7"> GG </li> <li id="8"> HH </li> <li id="9"> II </li> <li id="11"> AA11 </li> <li id="22"> BB11 </li> <li id="33"> CC11 </li> <li id="44"> DD11 </li> <li id="55"> EE11 </li> <li id="66"> FF11 </li> <li id="77"> GG11 </li> <li id="88"> HH11 </li> <li id="99"> II11 </li> <li id="111"> AA22 </li> <li id="222"> BB22 </li> <li id="333"> CC22 </li> <li id="444"> DD22 </li> <li id="555"> EE22 </li> <li id="666"> FF22 </li> <li id="777"> GG22 </li> <li id="888"> HH22 </li> <li id="999"> II22 </li> <li id="1111"> AA221 </li> <li id="2222"> BB221 </li> <li id="3333"> CC221 </li> <li id="4444"> DD221 </li> <li id="5555"> EE221 </li> <li id="6666"> FF221 </li> <li id="7777"> GG221 </li> <li id="8888"> HH221 </li> <li id="9999"> II221 </li> </ul> </body> <script> $(".arialViewOptions li").draggable(); $(".arialView").droppable({ activeClass : "ui-state-hover", hoverClass : "ui-state-active", drop : function(event, ui) { saveOffset($(ui.draggable).attr("id"), ui.offset); } }); setData(); function saveOffset(jObject, jOffset) { var storedData = $.cookie('the_cookie_data'); if (storedData != undefined) { storedData = $.parseJSON(storedData); } else { storedData = new Object(); } storedData[jObject] = jOffset; $.cookie('the_cookie_data', JSON.stringify(storedData)); } function setData() { var storedData = $.cookie('the_cookie_data'); console.log(storedData); if (storedData != undefined) { storedData = $.parseJSON(storedData); $.each(storedData, function(key, value) { $("#" + key).offset(value); $(".arialViewOptions").append("<li rel='" + key + "'>" + $("#" + key).html() + "</li>"); $(".arialViewOptions li[rel=" + key + "]").offset(value).addClass("needToAnimate"); }); $.each($(".needToAnimate"), function(key, value) { var main = this; var offset = $(main).css("top"); $(main).animate({ top : (parseInt(offset) - 20) + "px" }, 1000, 'linear').animate({ top : (parseInt(offset)) + "px" }, 1000, 'linear'); setInterval(function() { $(main).animate({ top : (parseInt(offset) - 20) + "px" }, 1000, 'linear').animate({ top : (parseInt(offset)) + "px" }, 1000, 'linear'); }, 2200); }); } } </script> </html>
+6
source share
1 answer

solved ..

just a couple of hackers and made with him ..;)

first change:

 .arialView { background-color: #999999; background-image: url("Chrysanthemum.jpg"); background-position: center center; background-repeat: no-repeat; float: left; height: 800px; **position: absolute;** width: 1200px; }

second change:

 .arialViewOptions { border-left: 1px solid #000000; float: left; height: 800px; list-style: none outside none; margin: 0; overflow: auto; padding: 0 0 0 1200px; position: relative; width: 100px; }

third change: in js

 storedData = $.parseJSON(storedData); $.each(storedData, function(key, value) { $("#" + key).css({top : value.top, left : value.left}).css("position", "fixed"); $(".arialViewOptions").append("<li rel='" + key + "'>" + $("#" + key).html() + "</li>"); $(".arialViewOptions li[rel=" + key + "]").css({top : value.top, left : value.left}).css("position", "fixed").addClass("needToAnimate"); });

If I missed anything else.

here is the full file.

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>New Web Project</title> <script src="jquery/js/jquery-1.9.1.js"></script> <script src="jquery/js/jquery-cookie.js"></script> <script src="jquery/js/jquery-ui-1.10.3.custom.min.js"></script> <link rel="stylesheet" href="jquery/css/ui-lightness/jquery-ui-1.10.3.custom.min.css"> <style> .arialView { background-color: #999999; background-image: url("Chrysanthemum.jpg"); background-position: center center; background-repeat: no-repeat; float: left; height: 800px; position: absolute; width: 1200px; } .arialViewOptions { border-left: 1px solid #000000; float: left; height: 800px; list-style: none outside none; margin: 0; overflow: auto; padding: 0 0 0 1200px; position: relative; width: 100px; } .arialViewOptions li { padding: 5px; } </style> </head> <body> <h1>New Web Project Page</h1> <div class="arialView"> &nbsp; </div> <ul class="arialViewOptions"> <li id="1"> AA </li> <li id="2"> BB </li> <li id="3"> CC </li> <li id="4"> DD </li> <li id="5"> EE </li> <li id="6"> FF </li> <li id="7"> GG </li> <li id="8"> HH </li> <li id="9"> II </li> <li id="11"> AA11 </li> <li id="22"> BB11 </li> <li id="33"> CC11 </li> <li id="44"> DD11 </li> <li id="55"> EE11 </li> <li id="66"> FF11 </li> <li id="77"> GG11 </li> <li id="88"> HH11 </li> <li id="99"> II11 </li> <li id="111"> AA22 </li> <li id="222"> BB22 </li> <li id="333"> CC22 </li> <li id="444"> DD22 </li> <li id="555"> EE22 </li> <li id="666"> FF22 </li> <li id="777"> GG22 </li> <li id="888"> HH22 </li> <li id="999"> II22 </li> <li id="1111"> AA221 </li> <li id="2222"> BB221 </li> <li id="3333"> CC221 </li> <li id="4444"> DD221 </li> <li id="5555"> EE221 </li> <li id="6666"> FF221 </li> <li id="7777"> GG221 </li> <li id="8888"> HH221 </li> <li id="9999"> II221 </li> </ul> </body> <script> $(".arialViewOptions li").draggable(); $(".arialView").droppable({ activeClass : "ui-state-hover", hoverClass : "ui-state-active", drop : function(event, ui) { saveOffset($(ui.draggable).attr("id"), ui.offset); } }); setData(); function saveOffset(jObject, jOffset) { var storedData = $.cookie('the_cookie_data'); if (storedData != undefined) { storedData = $.parseJSON(storedData); } else { storedData = new Object(); } storedData[jObject] = jOffset; $.cookie('the_cookie_data', JSON.stringify(storedData)); } function setData() { var storedData = $.cookie('the_cookie_data'); if (storedData != undefined) { storedData = $.parseJSON(storedData); $.each(storedData, function(key, value) { $("#" + key).css({ top : value.top, left : value.left }).css("position", "fixed"); $(".arialViewOptions").append("<li rel='" + key + "'>" + $("#" + key).html() + "</li>"); $(".arialViewOptions li[rel=" + key + "]").css({ top : value.top, left : value.left }).css("position", "fixed").addClass("needToAnimate"); }); $.each($(".needToAnimate"), function(key, value) { var main = this; var offset = $(main).css("top"); $(main).animate({ top : (parseInt(offset) - 20) + "px" }, 1000, 'linear').animate({ top : (parseInt(offset)) + "px" }, 1000, 'linear'); setInterval(function() { $(main).animate({ top : (parseInt(offset) - 20) + "px" }, 1000, 'linear').animate({ top : (parseInt(offset)) + "px" }, 1000, 'linear'); }, 2200); }); } } </script> </html>
+1
source

Source: https://habr.com/ru/post/957664/

More articles:


All Articles