Question

我要求在运行时单击按钮水平和垂直创建/拆分div元素。我能够创建一个div容器，根据单击的按钮分割画布。

例如：当我单击horizontalSplit按钮时，它应该在所选容器中创建两个新div。我遇到嵌套子div元素的问题。当我试图选择最里面的子代码时，选择父div也会产生问题。我无法弄清楚为什么我的nonSelectable类会自动获得“ui-selected”

这是我到目前为止所做的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
                <link rel="stylesheet" href="css/themes/base/jquery.ui.all.css"> 
                <script type="text/javascript" src="scripts/jquery-1.6.js"></script>
                <script type="text/javascript" src="scripts/jquery-ui-1.8.13.custom.min.js" ></script>              
                    <style>

                        #canvasWrapper {
                            border: 1px solid #DDDDDD;
                            height: 500px;
                            vertical-align:top;
                            margin-left: auto;
                            margin-right: auto;
                            width:  90%; 
                        }
                        .Frame {
                            border: 1px solid #DDDDDD;
                            height: 500px;
                            margin-left: auto;
                            margin-right: auto;
                            width:  100%; 
                        }
                        .hFrame {
                            border: 1px solid #DDDDDD;
                            height: 50%;
                            width:  100%; 
                            position:relative;
                        }

                        .nonSelectable {
                            border: 1px solid #DDDDDD;
                            height: 50%;
                            width:  100%; 
                            position:relative;
                        }

                        .vFrame {
                            border: 1px solid #DDDDDD;
                            height: 100%;
                            width: 50%; 
                            position:relative;
                        }

                        .buttonBar {
                            position: relative;
                            margin-left: auto;
                            margin-right: auto;
                            width:90%;
                        }
                        .Frame .ui-selecting,.vFrame .ui-selecting ,.hFrame .ui-selecting  { background: blue; }
                        .Frame .ui-selected,.vFrame .ui-selected ,.hFrame .ui-selected  { background: grey; }
                        .hFrame ui-selectable { background: yellow; }
                        .hFrame ui-selected { background: green; }
                        .hFrame ui-selectable ui-selected { background: pink; }

                    </style>



</head>
<body>
    <div id="canvasWrapper">
        <div id="canvasFrame" class="Frame">
        </div>
    </div>
    <div class="buttonBar">
        <input id="B1" class="button" type="submit" value="Horizontal Split">
        <input id="B2" class="button" type="submit" value="Vertical Split">
    </div>

    <script>
        $(document).ready(function()
        {   
            $("#canvasFrame").addClass("ui-selected");
            $(function() {
                $( ".Frame" ).selectable({
                     // cancel: '.nonSelectable'
                });
                $( ".hFrame" ).selectable({
                    // cancel: '.nonSelectable'

                });
                $( ".vFrame" ).selectable();
                // $( ".nonSelectable" ).selectable("disable");
            });

            addHFrame();

            addVFrame();



        });

    function addHFrame(){
        $("#B1").unbind('click.addit').bind('click.addit',function()
        {

        var numSplits=2;
        var select="";

        $(".ui-selected ").each(function () {   
                for (var i=0; i<numSplits ; i++){
                        $(this).removeClass('ui-selected ui-selectable');
                        $(this).parent().removeClass('ui-selected ui-selectable');
                        var $newElement = '<div></div>';

                        $(this).append($newElement);
                        $(this).children().addClass("hFrame");

                        //$(this).unbind('ui-selected ui-selectable');
                        // $(this).parent().selectable("disable")   ;
                        // $(this).remove("hFrame").addClass("nonSelectable")   ;
                        addHFrame();
                    }
                $(this).hasClass("hFrame") ? $(this).removeClass("hFrame").addClass("nonSelectable") : $(this);                         
            });
        });

    }

    function addVFrame(){

                $("#B2").click(function()
                {

                    $("div.ui-selected").each(function () {
                        // $(this).append('<div class="vFrame"> </div>');       
                        alert("Button Vertical Split Clicked"); 
                    });
                });
    }

    </script>
</body>

</html>

Answer 1

听起来你需要阻止事件传播： http://api.jquery.com/event.stopPropagation/

类似的问题：jQuery UI Sortable -- How can I cancel the click event on an item that's dragged/sorted?

单击该元素时，该事件会使DOM冒泡，直到它到达最高级别的HTML节点。这被称为事件传播。因此，事件将在所有元素的祖先上触发，除非事件传播停止。这可以这样做：

HTML -

<body>
    <div id="container">
        <a href="javascript:void(0);" id="click-element"></a>
    </div>
</body>

脚本 -

$('#click-element').click(function(event){

    //prevent container and body from triggering click event
    event.stopPropagation();

    //do stuff

});

Answer 2

我尝试过提出的解决方案，但部分工作正常。

但是如果容器是可选择的，那么如何通过鼠标选择项目的方式有所不同。

如果容器不可选择 - 一切都很完美。如果容器可以选择 - 您必须单击项目并执行小拖动，只需几个像素。

没有指定距离，所以我的期望是它应该以相同的方式工作。我甚至尝试调试jQuery，但没有找到解决方案。

有什么想法吗？

Answer 3

我知道这并不能为您的问题提供技术解决方案，但它的答案比解决方案更容易。停止使用.selectable。 .selectable是一个提供点击功能的助手，在这一点上，没有它就可以比你重新配置更容易。使用单击过滤器并添加一些事件传播覆盖以返回到可选择的样式功能：

$('#canvas').on('click', '.control', function (event) {
    var ui = $(this);
    $('#canvas .control').removeClass('ui-selected');
    ui.addClass('ui-selected');

    -- do stuff --

    event.stopPropagation();
    event.preventDefault();
});

要检测点击次数：

$('#canvas').on('click', function () {
    $('#canvas .control').removeClass('ui-selected');

    -- Do Stuff when not selected --
});

在选择.control时，由于event.stopPropagation（）而无法触发。

Jquery UI嵌套可选问题

3 个答案: