I am implementing an online form-builder type thing. I need to use Jquery-ui drag and drop in angular-dragdrop.
I have two containers, one on the left that keeps all the controls and on the right is the place where I can drop them. Now what I need is I don't want to get removed the original control from left container. I tried simple code uptil now as:
<!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>
I tried helper:clone in data-jqyoui-options but it did not work. It did not allow me to drag the element. The control is dragged but it comes back to its original place.
Requirement:
- I need control to be copied to right container keeping the original.
- In my current case my original control can be dragged anywhere on the webpage. I just want to restrict it in it's parent container or the droppable right container.