Question

我正在尝试使用jQuery sortable api将容器div中的div移动到另一个容器div。我已经在jquery ready函数中添加了代码但由于某种原因它不起作用。

以下是我添加的代码：

$(".portlet-content").sortable({
    connectWith: ".portlet-content"
});

我正在添加以下完整代码以便正确理解。任何帮助将受到高度赞赏。在此先感谢：）

<html>
<head>
    <title>Javascript Create Div Element Dynamically</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
    <style type="text/css">
        body {
            min-width: 520px;
            background-color: dimgray;
        }

        .column {
            width: 230px;
            float: left;
            padding-bottom: 100px;
        }

        .portlet {
            margin: 0 1em 1em 0;
            padding: 0.3em;
        }

        .portlet-header {
            padding: 0.2em 0.3em;
            margin-bottom: 0.5em;
            position: relative;
        }

        .portlet-toggle {
            position: absolute;
            top: 50%;
            right: 0;
            margin-top: -8px;
        }

        .portlet-content {
            padding: 0.4em;
            background-color: lightgray;
            border: 2px solid white;
        }

        .portlet-content:hover {
            background-color: lightblue;
        }


        .portlet-placeholder {
            border: 1px dotted black;
            margin: 0 1em 1em 0;
            height: 50px;
        }

        div {
            min-height: 20px;
        }

    </style>
    <script type="text/javascript" language="javascript"> 
        $(function () {
            $(".column").sortable({
                connectWith: ".column",
                handle: ".portlet-header",
                cancel: ".portlet-toggle",
                placeholder: "portlet-placeholder ui-corner-all"
            });

            $(".portlet-content").sortable({
                connectWith: ".portlet-content"
            });

            $(".portlet")
              .addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
              .find(".portlet-header")
                .addClass("ui-widget-header ui-corner-all");
        });
    </script>
</head>
<body>
    <div class="column">
        <div class='portlet'>
            <div class='portlet-header'><span class='rubrik'>Section 1</span></div>
            <div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
            <div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
        </div>
    </div>
    <div class="column">
        <div class='portlet'>
            <div class='portlet-header'><span class='rubrik'>Section 2</span></div>
            <div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
        </div>
    </div>
</body>
</html>

Answer 1

$(".portlet").sortable({
      connectWith: ".portlet",
      items: ".portlet-content"
});

如何使用jquery将容器div中的div移动到另一个容器div？

1 个答案: