Question

我正在尝试创建一个包含可以拖动到画布上的项目的可选列表。一切似乎工作正常，除了我添加一个可滚动的导航标签，它采用可选择的类，我可以按导航栏本身拖动一个空项目。

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

Answer 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 […]}

Nav标记采用嵌套的ul标记类

1 个答案: