Am creating an image slider with Angularjs using the codes from here
Using AngularJS 1.15, I could get the image to slide in. But when the second image comes in, the first image will disappear instead of sliding out. Can someone help?
NOTE: this does not work on Firefox and IE but works on Chrome.
Here are my codes
HTML
<div ng-controller="slideShowController" class="imageslide" ng-switch='slideshow' ng-animate="'animate'">
<div class="slider-content" ng-switch-when="1">
<img src="asset/building.jpg" width="100%" height="400px"/>
</div>
<div class="slider-content" ng-switch-when="2">
<img src="asset/slide-2.jpg" width="100%" height="400px"/>
</div>
<div class="slider-content" ng-switch-when="3">
<img src="asset/slide-3.jpg" width="100%" height="400px"/>
</div>
<div class="slider-content" ng-switch-when="4">
<img src="asset/slide-4.jpg" width="100%" height="400px"/>
</div>
</div>
Javascript
function slideShowController($scope, $timeout) {
var slidesInSlideshow = 4;
var slidesTimeIntervalInMs = 3000;
$scope.slideshow = 1;
var slideTimer =
$timeout(function interval() {
$scope.slideshow = ($scope.slideshow % slidesInSlideshow) + 1;
slideTimer = $timeout(interval, slidesTimeIntervalInMs);
}, slidesTimeIntervalInMs);
}
CSS
.imageslide{
width:100%;
height:400px;
margin: 0 auto;
margin-bottom: 20px;
}
.imageslide .slider-content {
position: absolute;
width:100%;
height:400px;
}
.animate-enter,.animate-leave {
-webkit-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
-moz-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
-ms-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
-o-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
transition:1000ms cubic-bezier(.165,.84,.44,1) all;
}
.animate-enter {
left:100%;
}
.animate-leave.animate-leave-active {
left:-100%;
}
.animate-enter.animate-enter-active,.animate-leave {
left:0;
}
The biggest issue I see with your plunker is the lack of an ng-app attribute on the page. After adding that and changing the animate out to use margin-left it works fine:
.animate-leave.animate-leave-active {
margin-left:-100%;
}
Forked plunkr:
http://plnkr.co/edit/BxWNlYVJUCNL7C1K65aU?p=preview
Below is the code I have refer from this page and tested. It worked for me now.
I just need to make it dynamic passing image url from Jsp custom tags.
Note :
It is working for me in Chrome and Firefox.
But it did not work for In IE 10.
I could not understand why it wont working in IE 10 can any one tell? Even it does not show any error in console.
<html ng-app>
<head>
<script data-require="angular.js#1.1.5" data-semver="1.1.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
<script>
function slideShowController($scope, $timeout) {
var slidesInSlideshow = 4;
var slidesTimeIntervalInMs = 3000;
$scope.slideshow = 1;
var slideTimer =
$timeout(function interval() {
$scope.slideshow = ($scope.slideshow % slidesInSlideshow) + 1;
slideTimer = $timeout(interval, slidesTimeIntervalInMs);
}, slidesTimeIntervalInMs);
}
</script>
<style>
.imageslide{
width:100%;
height:400px;
margin: 0 auto;
margin-bottom: 20px;
}
.imageslide .slider-content {
position: absolute;
width:100%;
height:400px;
}
.animate-enter,.animate-leave {
-webkit-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
-moz-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
-ms-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
-o-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
transition:1000ms cubic-bezier(.165,.84,.44,1) all;
}
.animate-enter {
left:100%;
}
.animate-leave.animate-leave-active {
left:-100%;
}
.animate-enter.animate-enter-active,.animate-leave {
left:0;
}
</style>
</head>
<body>
<div ng-controller="slideShowController" class="imageslide" ng-switch='slideshow' ng-animate="'animate'">
<div class="slider-content" ng-switch-when="1">
<img src="http://digitalresult.com/wp-content/uploads/2015/10/fox-animal-hd-wallpapers-47.jpeg" width="100%" height="400px"/>
</div>
<div class="slider-content" ng-switch-when="2">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTewdD9dUZGbaCaRtV2Ggz_YxQq1tbhVcSphtRUjosU8a0_JOZF" width="100%" height="400px"/>
</div>
<div class="slider-content" ng-switch-when="3">
<img src="https://s-media-cache-ak0.pinimg.com/736x/4e/ac/4e/4eac4e00cebdea7f62359bfd1b2ca51b.jpg" width="100%" height="400px"/>
</div>
<div class="slider-content" ng-switch-when="4">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTrBU0M7EwiGepnnccRoe7jA5_fQ-AaOiu6WpehFqz85HhYhKHk" width="100%" height="400px"/>
</div>
</div>
</body>
</html>
Related
I am new to ArcGIS JavaScript API programming and I am trying to implement navigation toolbar along with basemap gallery but I am getting the following error:
Uncaught Error: Tried to register widget with id==map but that id is already registered
I have tried to destroy the widget but still does not work.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>Tabs inside accordion</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.23/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.23/esri/css/esri.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.23/dojox/layout/resources/ExpandoPane.css">
<link rel="stylesheet" href="css/layout.css">
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#map {
padding: 0;
}
.zoominIcon {
background-image: url(images/nav_zoomin.png);
width: 16px;
height: 16px;
}
.zoomfullextIcon {
background-image: url(images/nav_fullextent.png);
width: 16px;
height: 16px;
}
.zoomprevIcon {
background-image: url(images/nav_previous.png);
width: 16px;
height: 16px;
}
.zoomnextIcon {
background-image: url(images/nav_next.png);
width: 16px;
height: 16px;
}
.panIcon {
background-image: url(images/nav_pan.png);
width: 16px;
height: 16px;
}
.identifyIcon {
background-image: url(images/info_blue2.png);
width: 16px;
height: 16px;
}
</style>
<script src="https://js.arcgis.com/3.23/"></script>
<script>
var map, navToolbar;
require([
"esri/map",
"esri/dijit/BasemapGallery",
"esri/arcgis/utils",
"dojo/parser",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/layout/TabContainer",
"dijit/layout/AccordionContainer",
"dojox/layout/ExpandoPane",
"dijit/TitlePane",
"esri/toolbars/navigation",
"dojo/on",
"dijit/registry",
"dijit/Toolbar",
"dijit/form/Button",
"dojo/domReady!"
],
function(Map, BasemapGallery, arcgisUtils,parser,Navigation,on,registry,navToolbar)
{
parser.parse();
map = new Map("map", {
basemap: "topo",
center: [73.88381, 10.5327242],
zoom: 7
});
navToolbar = new Navigation(map);
on(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);
registry.byId("zoomin").on("click", function () {
navToolbar.activate(Navigation.ZOOM_IN);
});
registry.byId("zoomout").on("click", function () {
navToolbar.activate(Navigation.ZOOM_OUT);
});
registry.byId("zoomfullext").on("click", function () {
navToolbar.zoomToFullExtent();
});
registry.byId("zoomprev").on("click", function () {
navToolbar.zoomToPrevExtent();
});
registry.byId("zoomnext").on("click", function () {
navToolbar.zoomToNextExtent();
});
registry.byId("pan").on("click", function () {
navToolbar.activate(Navigation.PAN);
});
registry.byId("deactivate").on("click", function () {
navToolbar.deactivate();
});
function extentHistoryChangeHandler () {
registry.byId("zoomprev").disabled = navToolbar.isFirstExtent();
registry.byId("zoomnext").disabled = navToolbar.isLastExtent();
}
//add the basemap gallery, in this case we'll display maps from ArcGIS.com including bing maps
var basemapGallery = new BasemapGallery({
showArcGISBasemaps: true,
map: map
}, "basemapGallery");
basemapGallery.startup();
basemapGallery.on("error", function(msg) {
console.log("basemap gallery error: ", msg);
});
});
</script>
</head>
<body class="claro">
<div class="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width:100%; height:100%;">
<div id="header" data-dojo-type="dijit/layout/ContentPane" style="text-align:center;" data-dojo-props="region:'top'">
<div style="display: width:100%;overflow:hidden;">
<div style="float:left;"><img src="..\images\cmfri-logo.png" /></div>
<div style="float:right;"><img src="../images/icar-logo.png" /></div>
<div style="float:right;"><img src="../images/platinumlogo.jpg" /></div>
<div style="float:center;text-align:center;">Indian Council of Agricultural Research<br>CENTRAL MARINE FISHERIES RESEARCH INSTITUTE</div>
</div>
</div>
<div data-dojo-type="dojox/layout/ExpandoPane"
data-dojo-props="duration:300, title:'Details', region:'left', maxWidth:'220px', easeIn:'easing.linear', easeOut:'easing.linear'"
style="width:300px;">
<div data-dojo-type="dijit/layout/ContentPane" style="text-align:center;" data-dojo-props="region:'left'" id="leftPane">
<div id="navToolbar" data-dojo-type="dijit.Toolbar">
<div data-dojo-type="dijit/form/Button" id="zoomin" data-dojo-props="iconClass:'zoominIcon'">Zoom In</div>
<div data-dojo-type="dijit/form/Button" id="zoomout" data-dojo-props="iconClass:'zoomoutIcon'">Zoom Out</div>
<div data-dojo-type="dijit/form/Button" id="zoomfullext" data-dojo-props="iconClass:'zoomfullextIcon'">Full Extent</div>
<div data-dojo-type="dijit/form/Button" id="zoomprev" data-dojo-props="iconClass:'zoomprevIcon'">Prev Extent</div>
<div data-dojo-type="dijit/form/Button" id="zoomnext" data-dojo-props="iconClass:'zoomnextIcon'">Next Extent</div>
<div data-dojo-type="dijit/form/Button" id="pan" data-dojo-props="iconClass:'panIcon'">Pan</div>
<div data-dojo-type="dijit/form/Button" id="deactivate" data-dojo-props="iconClass:'deactivateIcon'">Deactivate</div>
</div>
</div>
<div data-dojo-type="dijit/layout/AccordionContainer">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Basemap Gallery'" style="width:380px; height:280px; overflow:auto;">
<div id="basemapGallery"></div>
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Pane 2'" style="width:380px; height:280px; overflow:auto;">
<div data-dojo-type="dijit/layout/TabContainer">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Tab 1', selected:'true'">
Content for the first tab
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Tab 2'">
Content for the second tab
</div>
</div>
</div>
</div>
</div>
</div>
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="padding:0;"> </div>
</div>
</body>
</html>
Your problem here is just that you does a mistake in your require function. You add navToolbar variable that don't match any library. Furthermore the order matter, the corresponding variable must have same position as the library.
Try with this :
require([
"esri/map",
"esri/dijit/BasemapGallery",
"esri/arcgis/utils",
"dojo/parser",
"esri/toolbars/navigation",
"dojo/on",
"dijit/registry",
"dijit/Toolbar",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/layout/TabContainer",
"dijit/layout/AccordionContainer",
"dojox/layout/ExpandoPane",
"dijit/TitlePane",
"dijit/form/Button",
"dojo/domReady!"
],
function(Map, BasemapGallery, arcgisUtils,parser,Navigation,on,registry)
{
It works for me, here is a working example with your code sample :
Plunker
Hope it helps!
I was having a problem getting the simple demo to work found here.
I'm getting the two lists to show up, however I am unable to drag and drop items. The demo is very simple, just an html file, javascript file and css file.
Here's my index.html file:
<!DOCTYPE html>
<html ng-app="demo">
<head lang="en">
<meta charset="utf-8">
<title>Drag & Drop Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script src="bower_components/angular-drag-and-drop-lists/angular-drag-and-drop-lists.min.js"></script>
<script src="Scripts/my-app.js"></script>
<link href="Content/my-styling.css" rel="stylesheet" />
</head>
<body class="simpleDemo" ng-controller="SimpleDemoController">
<ul dnd-list="list">
<li ng-repeat="item in models.lists.A"
dnd-draggable="item"
dnd-moved="models.lists.A.splice($index, 1)"
dnd-effect-allowed="move"
dnd-selected="models.selected = item"
ng-class="{'selected': models.selected === item}">
{{item.label}}
</li>
</ul>
<ul dnd-list="list">
<li ng-repeat="item in models.lists.B"
dnd-draggable="item"
dnd-moved="models.lists.B.splice($index, 1)"
dnd-effect-allowed="move"
dnd-selected="models.selected = item"
ng-class="{'selected': models.selected === item}">
{{item.label}}
</li>
</ul>
</body>
</html>
Here's my js file:
angular.module("demo", []).controller("SimpleDemoController", function ($scope) {
$scope.models = {
selected: null,
lists: { "A": [], "B": [] }
};
// Generate initial model
for (var i = 1; i <= 3; ++i) {
$scope.models.lists.A.push({ label: "Item A" + i });
$scope.models.lists.B.push({ label: "Item B" + i });
}
// Model to JSON for demo purpose
$scope.$watch('models', function (model) {
$scope.modelAsJson = angular.toJson(model, true);
}, true);
});
And here's my css file:
.simpleDemo ul[dnd-list],
.simpleDemo ul[dnd-list] > li {
position: relative;
}
.simpleDemo ul[dnd-list] {
min-height: 42px;
padding-left: 0px;
}
.simpleDemo ul[dnd-list] .dndDraggingSource {
display: none;
}
.simpleDemo ul[dnd-list] .dndPlaceholder {
display: block;
background-color: #ddd;
min-height: 42px;
}
.simpleDemo ul[dnd-list] li {
background-color: #fff;
border: 1px solid #ddd;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
}
.simpleDemo ul[dnd-list] li.selected {
background-color: #dff0d8;
color: #3c763d;
}
This code is simply copied and pasted from the simple demo, just slightly modified to show lists A and B. Does anyone know what's wrong?
You're forgetting Dependency Injection just replace
angular.module("demo", [])
with
angular.module("demo", ['dndLists'])
and it should work..
plunk
--Update--
I found some problem with your Markup as well you are referencing list in <ul dnd-list="list>" this will not work as you're referencing an undefined variable, you should be referencing the list you are using in the drag-able. for example for the first list you can change.
<ul dnd-list="list">
to
<ul dnd-list="models.lists.A">
and that should work properly now..
P.S I've updated the plunk
you need the next: (that is the dependency injection)
app.requires.push('dndLists');
you are missing the ng-repeat in your angular it should look like this: (ng-repeat="(listName, list) in models.lists")
<div ng-repeat="(listName, list) in models.lists" class="col-md-6 ng-scope">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title ng-binding">List A</h3>
</div>
<div class="panel-body ng-scope">
<ul dnd-list="list" class="ng-scope">
<li ng-repeat="item in list"
dnd-draggable="item"
dnd-moved="list.splice($index, 1)"
dnd-effect-allowed="move"
dnd-selected="models.selected = item"
ng-class="{'selected': models.selected === item}"
dnd-disable-if="list.length < 2"
class="ng-binding ng-scope"
draggable="true">
{{item.label}}
</li>
</ul>
</div>
</div>
</div>
I have problem with swapping the dragged/dropped elements.
DOM / Angular Structure:
angular.module('app', ['ngDragDrop'])
.controller('controller', function($scope) {
$scope.listItems = [
{name: "some name", title: "title"},
{name: "some name2", title: "title2"},
];
$scope.input = {};
$scope.draggableOprions = {
revert: 'invalid'
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="https://code.angularjs.org/1.4.9/angular.js"></script>
<script src="https://cdn.jsdelivr.net/angular.dragdrop/1.07/angular-dragdrop.min.js"></script>
<div ng-app="app">
<div ng-controller="controller">
<div class="container">
<ul>
<li data-drag="true"
data-jqyoui-options="draggableOprions"
jqyoui-draggable="{animate:true}"
ng-model="item" ng-repeat="item in listItems track by $index">
{{item.title}}
</li>
</ul>
</div>
<div class="container"
data-drop="true"
data-jqyoui-options jqyoui-droppable
ng-model="input">
<input ng-model="input.name">
</div>
</div>
</div>
The problem:
While I drag and drop an list item 1 - the name property of the list item 1 comes to the input model. But no longer is available in list item 1. Actually the list item 1 value goes undefined || null after I drop it in the input. If I now try to drag-n-drop list item 2 item in the input - the values swapping (list item 1 = undefined || null ? and list item 2 = list item 1 value and input model equal to list item 2 value`. So everything shuffle.
What I need:
I need to drag and drop list items in the input, avoiding losing values in list items. Every time i drop list item in the input, I need it's value to bind to the input.
Out of the box
I can change the drag and drop library, or even use source code, but the library is the better choice. I accept almost every good working answer which didn't broke any standards of good code (I mean that I need code which will not broke the other code and has good structure).
I suggest to use ngDraggable, an Angular module with no depency from jQuery or jQuery-ui.
Here below is a working snippet or check my Codepen:
angular.module('app', ['ngDraggable'])
.controller('controller', function($scope) {
$scope.listItems = [{
name: "some name",
title: "title1"
}, {
name: "some name2",
title: "title2"
}, {
name: "some name3",
title: "title3"
}, ];
$scope.droppedObjects = [];
$scope.input = {};
// drag complete over drop area
$scope.onDragComplete = function(data, evt) {
console.log("drag success, data:", data);
var index = $scope.droppedObjects.indexOf(data);
if (index > -1) {
$scope.droppedObjects.splice(index, 1);
}
}
// drop complete over drop area
$scope.onDropComplete = function(data, evt) {
console.log("drop success, data:", data);
var index = $scope.droppedObjects.indexOf(data);
if (index == -1)
$scope.droppedObjects.push(data);
}
// drop complete over input box
$scope.onDropCompleteInput = function(data, evt) {
console.log("drop on input success, data:", data);
$scope.input = data;
}
// drop complete over items area (remove from dropped list)
$scope.onDropCompleteRemove = function(data, evt) {
console.log("drop success - remove, data:", data);
var index = $scope.droppedObjects.indexOf(data);
if (index != -1)
$scope.droppedObjects.splice(index);
}
// other draggable events handlers
var onDraggableEvent = function(evt, data) {
console.log("128", "onDraggableEvent", evt, data);
}
$scope.$on('draggable:start', onDraggableEvent);
//$scope.$on('draggable:move', onDraggableEvent);
$scope.$on('draggable:end', onDraggableEvent);
});
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
[ng-drag] {
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.item {
width: 100px;
height: 60px;
background: rgba(255, 0, 0, 0.5);
color: white;
text-align: center;
padding-top: 5%;
display: inline-block;
margin: 0 10px;
cursor: move;
}
ul.draggable-objects:after {
display: block;
content: "";
clear: both;
}
.draggable-objects li {
float: left;
display: block;
width: 120px;
height: 100px;
}
[ng-drag].drag-over {
border: solid 1px red;
}
[ng-drag].dragging {
opacity: 0.5;
}
.drop-container {
background: rgba(0, 255, 0, 0.5);
text-align: center;
width: 600px;
height: 200px;
padding-top: 90px;
display: block;
margin: 20px auto;
position: relative;
}
.drop-input {
width: 200px;
height: 40px;
}
.drag-enter {
border: solid 5px red;
}
.drop-container span.title {
display: block;
position: absolute;
top: 10%;
left: 50%;
width: 200px;
height: 20px;
margin-left: -100px;
margin-top: -10px;
}
.drop-container div {
position: relative;
z-index: 2;
}
<script src="//code.angularjs.org/1.4.8/angular.js"></script>
<script src="//rawgit.com/fatlinesofcode/ngDraggable/master/ngDraggable.js"></script>
<body ng-app="app">
<div ng-controller="controller">
<div class="row">
<h1>ngDraggable Example</h1>
</div>
<div ng-drop="true" ng-drop-success="onDropCompleteRemove($data,$event)">
<ul class="draggable-objects">
<li ng-repeat="obj in listItems">
<div ng-drag="true" ng-drag-data="obj" data-allow-transform="true" class="item"> {{obj.title}} </div>
</li>
</ul>
</div>
<hr/>
<div ng-drop="true" ng-drop-success="onDropComplete($data,$event)" class="drop-container">
<span class="title">Drop area</span>
<div ng-repeat="obj in droppedObjects" ng-drag="true" ng-drag-data="obj" ng-drag-success="onDragComplete($data,$event)" class="item">
{{obj.title}}
</div>
</div>
<hr/>
<div class="container">
Drop on input:
<input ng-model="input.name" class="drop-input" ng-drop="true" ng-drop-success="onDropCompleteInput($data,$event)">
</div>
<br>
<hr/>
<pre>listItems = {{listItems|json}}</pre>
<pre>input = {{input|json}}</pre>
<pre>droppedObjects = {{droppedObjects|json}}</pre>
</div>
</body>
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="https://code.angularjs.org/1.4.9/angular.js"></script>
<script src="https://cdn.jsdelivr.net/angular.dragdrop/1.07/angular-dragdrop.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="MyController">
<div id="products">
<h1 class="ui-widget-header">Products</h1>
<div id="catalog">
<div>
<ul>
<li ng-repeat='item in list1' ng-show="item.title" data-drag="true" data-jqyoui-options="{revert: 'invalid', helper: 'clone'}" ng-model="list1" jqyoui-draggable="{index: {{$index}}, animate: true, placeholder: 'keep'}">{{item.title}}</li>
</ul>
</div>
</div>
</div>
<div id="cart">
<h1 class="ui-widget-header">Shopping Cart</h1>
<div class="ui-widget-content">
<ol data-drop="true" ng-model='list4' jqyoui-droppable="{multiple:true}">
<li ng-repeat="item in list4 track by $index" ng-show="item.title" data-drag="true" data-jqyoui-options="{revert: 'invalid', helper: 'clone'}" ng-model="list4" jqyoui-draggable="{index: {{$index}},animate:true}">{{item.title}}</li>
<li class="placeholder" ng-hide="hideMe()">Add your items here</li>
</ol>
</div>
</div>
</div>
<script>
var app = angular.module('myApp', ['ngDragDrop']);
app.controller('MyController', function ($scope,$http,$sce)
{
$scope.list1 = [{'title': 'Lolcat Shirt'},{'title': 'Cheezeburger Shirt'},{'title': 'Buckit Shirt'}];
$scope.list4 = [];
$scope.hideMe = function()
{
return $scope.list4.length > 0;
}
});
</script>
</body>
</html>
You have to use helper: 'clone' in data-jqyoui-options
How can i open an another page after onsen ui load this modal
https://onsen.io/reference/ons-modal.html#example
ons.bootstrap();
$(document.body).on("pageinit", '#my-page', function() {
$("#show-modal", this).click(function() {
modal.show();
setTimeout('modal.hide()', 2000);
});
});
your view
<style>
.loading {
position: absolute;
left: 0;
top: 45%;
bottom: 0;
right: 0;
text-align: center;
margin: auto;
}
</style>
<ons-modal var="modal">
...content of your model
</ons-modal>
<ons-navigator>
<ons-page id="my-page">
<ons-toolbar>
<div class="center">Modal</div>
</ons-toolbar>
<p style="text-align: center">
<ons-button id="show-modal" modifier="light">Open Modal</ons-button>
</p>
<div id="myDiv" class="loading ng-hide">
<ons-icon icon="ion-load-c" spin="true"></ons-icon>
<br>
<br> Please wait.
<br>Closing in 2 seconds.
</div>
</ons-page>
</ons-navigator>
your js file
ons.bootstrap();
$(document.body).on("pageinit", '#my-page', function() {
$("#show-modal", this).click(function() {
angular.element(document.querySelector('#myDiv')).removeClass('ng-hide');
setTimeout( function () {angular.element(document.querySelector('#myDiv')).addClass('ng-hide');
modal.show();
}, 2000);
});
});
i created an shopping cart using using angularJS drag and drop. when i drag the item from catalog to cart and drop it, it goes successfully in the cart,
the problem is when i drag and drop same item in the cart, it again accept the product and add it in the cart.
how to remove this cloning?
to access the complete code please download it from here click to download the .rar file
or here is the code of main index file
the bold code below is attachment of CSS and script you can download the same version from the .rar file above or by googling the script name.
`
<meta charset="utf-8" />
<title>Drag & Drop</title>
**<script src="js/jquery.min.js"></script>**
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js">
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.7/angular.min.js">
**<script src="angular_drag_drop/angular-dragdrop.js"></script>
<link href="assets/css/jquery-ui.css" rel="stylesheet">**
<style>
.thumbnail { height: 280px !important; }
.btn-droppable { width: 180px; height: 30px; padding-left: 4px; }
.btn-draggable { width: 160px; }
.emage { height: 215px; }
h1 { padding: .2em; margin: 0; }
#products { float:left; width: 500px; margin-right: 2em; }
#cart { width: 200px; float: left; margin-top: 1em; }
#cart ol { margin: 0; padding: 1em 0 1em 3em; }
</style>
<script>
$(function() {
$("#catalog").accordion();
});
var App = angular.module('drag-and-drop', ['ngDragDrop']);
App.controller('oneCtrl', function($scope, $timeout) {
$scope.list1 = [{'title': 'Lolcat Shirt'},{'title': 'Cheezeburger Shirt'},{'title': 'Buckit Shirt'}];
$scope.list4 = [];
$scope.hideMe = function() {
$scope.list1 = [{'title': 'Lolcat Shirt'},{'title': 'Cheezeburger Shirt'},{'title': 'Buckit Shirt'}];
return $scope.list4.length > 0;
}
});
</script>
<body ng-controller="oneCtrl">
<div id="products">
<h1 class="ui-widget-header">Products</h1>
<div id="catalog">
<h2>T-Shirts</h2>
<div data-drop="true" ng-model='list1' jqyoui-droppable="{multiple:true}">
<ul>
<li ng-repeat='item in list1' ng-show="item.title" data-drag="true" data-jqyoui-options="{revert: 'invalid', helper: 'clone'}" ng-model="list1" jqyoui-draggable="{index: {{$index}}, animate: true, placeholder: 'keep'}">{{item.title}} {{list1.length}}
</li>
</ul>
</div>
</div>
</div>
<div id="cart">
<h1 class="ui-widget-header">Shopping Cart</h1>
<div class="ui-widget-content">
<ol data-drop="true" ng-model='list4' jqyoui-droppable="{multiple:true}">
<li ng-repeat="item in list4" ng-show="item.title" data-drag="true" data-jqyoui-options="{revert: 'invalid', helper: 'clone'}" ng-model="list4" jqyoui-draggable="{index: {{$index}},animate:true}">
{{item.title}}
</li>
<li class="placeholder" ng-hide="hideMe()">
Add your items here
</li>
</ol>
</div>
</div>
</body>
</html>`
If your shopping cart is the only use-case for drag and drop, then you could tackle this by disabling dragging once the object is in the cart. You can do this by binding the draggable class to an expression which checks whether the object is in the cart.
<div ng-class="{draggable: cart.indexOf(object) != -1}"></div>
Here is a basic fiddle to show you what I mean - note, this doesn't include any dragging or dropping, but is just to highlight the class binding, and get you started.
Fiddle