Nav tag taking its nested ul tag class

Question

I'm trying to create a selectable list containing items that u can drag onto a canvas. Everything seems to work fine except for the fact that when I add a scrollable nav tag it takes on the selectable class, and I can press on the navigation bar itself to drag an empty item.

nav ul{height:200px; width:18%;}
nav ul{overflow:hidden; overflow-y:scroll;

I just make the nav scrollable.

<table style="width:100%">
<td>
    <nav>
        <ul class="DragList">
            <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
            <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
            <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
            <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
            <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
            <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
            <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
        </ul>
    </nav>
</td>
<td>
    <canvas class="dropZone ui-widget-header ">
    </canvas>
</td>

here I gave the ul the draglist class which basically just lets them be selectable (and I add a function to generate a new DOM object on the position of the cursor with the same text as the on in the li element.

but for some reason the nav is also taking the draglist class and I can click on it to make new object with not text in it.

I'm fairly new to html/javascript/jquery so I might be missing some obvious workaround.

Thank you in advance.

P.S: This is the whole script that Im using (as someone requested)

  <script>
$( function() {
$(".DragList") //DragList is the class for the list used to drag from
    .selectable({
        stop:
            function( event, ui ) {
                console.log("alert type 1");
                $(event.target).children('.ui-selected').not(':first').removeClass('ui-selected');
                var Lname = $(this).children(".ui-selected").map(function () {
                    return $(this).text();
                }).get().join('; ');
                console.log(Lname);
                var obj = $("<div class='block2 ui-widget-content'><h3 class='ui-widget-header'>"+Lname+"</h3></div>");
                obj.appendTo("body");
                obj.offset({
                    top: event.pageY-25,
                    left:event.pageX-25});
                obj.on("mousemove", function(e){
                            var $this = $(".block2");
                            $this .offset({
                                top: e.pageY - $this .height()/2,
                                left:e.pageX - $this .width()/2});

                            })
                    .click(function(e){

                            console.log("alert type 3");
                            obj.off("mousemove");
                            obj.removeClass("block2");
                            obj.addClass("block");

                            $(".block") 
                                .draggable({
                                    grid: [20,20],
                                    snap: true,
                                    snapTolerance: 30,
                                    containement: 'parent',
                                    //helper: 'clone',    //need to fix, clone not being created
                                    //opacity: 0.35
                                })
                                .resizable({
                                    grid: [20,20],
                                    animate: true,
                                    handles: "all",
                                    ghost: true
                                })

                            });
                    $(".block2")
                    .dblclick(function(){ //we dnt really need this dblclick function, keeping it for now in cas we still need to manipulate block2 class elements instead of block
                        $(document).on("mousemove", function(e){
                            var $this = $(".block2");
                            $this .offset({
                                top: e.pageY - $this .height()/2,
                                left:e.pageX - $this .width()/2});
                            });
                        }).click(function(e){
                            $(document).off("mousemove");
                            })

            }
    })
    .disableSelection();

$(".dropZone")
.droppable({
    accept: ".block",
    drop:   function(event, ui){
                console.log("alert type 2");
            }
        });


});
</script>

You could also see in this image how when I press the scroll bar an empty object (.block2 from the script) gets created.

Answer 1

Well, its kind of embarrassing... The draglist class was given to the ul tag, so to prevent my error I simply added a if statement that checked whether the selected item has some additional info that I passed it. such as:

<li […]><p class="checker>true</p></li>

then in the script:

var Lchecker = $(this).children(".ui-selected").map(function () {
                    return $(this).children(".checker").text();
                }).get().join('; ');

and finally add the if statement:

if (Lchecker == 'true') {
[…] previous code […]}