Question

我正在实现一个在线表单构建器类型的东西。我需要在angular-dragdrop中使用Jquery-ui拖放。

我有两个容器，一个在左边，保留所有控件，右边是我可以放下它们的地方。现在我需要的是我不想从左侧容器中移除原始控件。我现在尝试使用简单的代码：

<!DOCTYPE html>
<html ng-app="myapp">
<head lang="en">
    <meta charset="utf-8">
    <title>Angular drag and drop</title>
    <!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.min.css" rel="stylesheet"> -->
    <script src="../components/jquery.min.js"></script>
    <script src="../components/jquery-ui.js"></script>
    <script src="../components/angular.js"></script>
    <script src="../src/angular-dragdrop.js"></script>
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">

</head>
<body>

    <div class="container" ng-controller="mainCtrl" style="height:600px;">

        <div class="col-sm-4" style="background-color:green" data-drag="true" data-drop="false" data-jqyoui-options="{revert: revertCard}" jqyoui-draggable="{animate:true}">
            <div>
                <button class="btn btn-primary">Hello world</button>
            </div>

        </div>

        <div class="col-sm-8" style="background-color:grey; height:100%" data-drop="true" data-jqyoui-options jqyoui-droppable="{multiple: true}">

        </div>


    </div>
</body>
</html>

<script>
    var app = angular.module('myapp', ['ngDragDrop']);
    app.controller('mainCtrl', function ($scope) {


    });



</script>

我在helper:clone中尝试了data-jqyoui-options，但它没有用。它不允许我拖动元素。控件被拖动但它又回到原来的位置。

要求：

我需要将控件复制到正确的容器中，保留原件。
在我目前的情况下，我的原始控件可以拖到网页上的任何位置。我只想在它的父容器或可放置的右容器中限制它。

angular-dragdrop拖动后保留原始元素

0 个答案: