导航标签采用其嵌套的 ul 标签类答案

【问题标题】：Nav tag taking its nested ul tag class导航标签采用其嵌套的 ul 标签类
【发布时间】：2018-11-28 07:31:17
【问题描述】：

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

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 类，它基本上只是让它们可以选择（我添加了一个函数来在光标位置生成一个新的 DOM 对象，其文本与 li 元素中的 on 相同。

但由于某种原因，导航也采用了 Draglist 类，我可以单击它来创建没有文本的新对象。

我对 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）。

【问题讨论】：

您能在您的 javascript/jquery 实现中添加一个示例吗？
您好，我添加了我正在使用的整个脚本，我之前没有包含它，因为我看不到它对我的问题有什么帮助，并且不想让问题变得比需要的更长。
欢迎来到 Stack Overflow。请查看：stackoverflow.com/help/mcve 目前尚不清楚您使用的是什么版本，也不清楚需要采取哪些步骤来复制问题。
已测试：jsfiddle.net/Twisty/qruej30g - 无法复制问题。
@Twisty 您好，感谢您的帮助和时间。我使用两种不同的浏览器（edge 和 chrome）测试了你的小提琴，并且出现了同样的问题。如果你按下导航栏，你会得到没有名字的 div。

标签： jquery html jquery-ui nav jquery-ui-selectable

【解决方案1】：

嗯，有点尴尬... Draglist 类被赋予了 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 […]}

【讨论】：