导航标签采用其嵌套的 ul 标签 class

Question

我正在尝试创建一个可选列表，其中包含您可以拖动到 canvas 上的项目。一切似乎都工作正常，除了当我添加一个可滚动的导航标签时它采用可选 class，我可以按下导航栏本身来拖动一个空项目。

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

我只是让导航可以滚动。

<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>

这里我给了 ul draglist class 基本上只是让它们可选择（我添加了一个函数来在光标位置生成一个新的 DOM 具有相同文本的对象作为 li 元素中的 on。

但出于某种原因，导航也占用了拖列表 class，我可以单击它来创建没有文本的新对象。

我是 html/javascript/jquery 的新手，所以我可能遗漏了一些明显的解决方法。

提前致谢。

P.S：这是我正在使用的整个脚本（根据某人的要求）

  <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>

您还可以在 this 图像中看到当我按下滚动条时如何创建一个空对象（脚本中的 .block2）。

Answer 1

好吧，有点尴尬... draglist class 被赋予了 ul 标签，所以为了防止我的错误，我只是添加了一个 if 语句来检查所选项目是否有一些额外的信息我通过了。如：

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

然后在脚本中：

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

最后添加 if 语句：

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

导航标签采用其嵌套的 ul 标签 class

Nav tag taking its nested ul tag class

html

jquery

jquery-ui

nav

jquery-ui-selectable