如何使用jquery將容器div中的div移動到另一個容器div？

Question

我正在嘗試使用jQuery可排序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 個解決方案

解決方案1
0 已采納 2014-02-16 23:17:16

如何使用jquery將容器div中的div移動到另一個容器div？

問題描述

1 個解決方案

解決方案1 0 已采納 2014-02-16 23:17:16

解決方案1
0 已采納 2014-02-16 23:17:16