时间戳

首页 > 解决方案 > 导航标签采用其嵌套的 ul 标签类

jquery - 导航标签采用其嵌套的 ul 标签类

问题描述

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

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 还很陌生，所以我可能会遗漏一些明显的解决方法。

先感谢您。

PS：这是我使用的整个脚本（根据某人的要求）

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

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

标签： jqueryhtmljquery-uinavjquery-ui-selectable

解决方案

好吧，这有点尴尬...... 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 […]}

推荐阅读