I am trying to do drag and drop without deleting the item from the dragged list. I followed an example Working demo and tried to reproduce the same. Unfortunately it was not working and I found that the cdkDropListDropped event is emitted. You can find the issue in this link Problematic demo
I want to achieve like the Working demo
Please show me where I am wrong.
I found I had to move the directives cdkDropList and cdkDropListConnectedTo="drop-list" from the div with ID div1 to the parent div so the HTML becomes:
<div class="column left" cdkDropList cdkDropListConnectedTo="drop-list">
<div id="div1" cdkDrag *ngFor="let type of types" [cdkDragData]="type" (cdkDragMoved)="moved($event)" (cdkDropListDropped)="itemDropped($event)">
{{type.text}}
<div *cdkDragPlaceholder class="field-placeholder"></div>
</div>
</div>
At this point the cdkDropListDropped event fired and called the itemDropped function. The problem then was, there was a runtime error on the following line:
copyArrayItem(
event.previousContainer.data,
event.container.data,
event.previousIndex,
event.currentIndex
);
After copying the itemDropped method from your working demo StackBlitz, it then started work. Please see this StackBlitz for a demo.
Related
Below web-link demonstrates the routerLinkActive id working when used as a boolean value for a distinct HTML element' [ngClass]
https://stackblitz.com/edit/routerlinkactivesimple?file=src%2Fapp%2Fapp.module.ts
In contrast the routerLinkActive id is not working with #angular/material instance below web-link, but the error disappears by commenting lines 5 and 6 , however not rectifying the usability of routerLinkActive id:
https://stackblitz.com/edit/mat-routerlinkactive?file=src%2Fapp%2Fnav%2Fnav.component.html
your second link has a lot of issues, the app-nav is not even used, so "commenting lines" is not enough to make it work..
but anyway
there is no issue with routerLinkActive, the problem is :
<button mat-button color="white" fxHide.xs *ngIf="true">
<span>
<a routerLink="city-list" routerLinkActive="active-link citNgClassList" #rla_clist="routerLinkActive"
[routerLinkActiveOptions]="{exact: true}">
<mat-icon class="mr">maps_home_work</mat-icon>
Cities
</a>
</span>
</button>
your link is inside a button..
remove the button, keep the "a" and it works
and what's the point of *ngIf="true" ?
Edit :
you can keep the button and remove the 'a' if you want to keep the button style (but it's bad usability wise to display link as button..), just put routerLink, routerLinkActive & routerLinkActiveOption on the button directly
Thanks, JiBi , for your observations. Indeed stripping off the material button wrapper of the links does not longer gives an error on the second StackBlitz link line 5 span , but it hurts to the over all page with styling in a bad way that breaks the harmony of the page that is not easy to substitute. I have removed some of the comments , that were left in place to give an easy idea of what I have tried.
The *ngIf= "true" of the buttons was meant to be a *ngIf= "!rla_clist" or *ngIf= "!rla_cform" so the button sender to the link will not displayed if I am on the link itself ,.....but this is another problem of which better solution I am awaiting.
[Dart+Polymer]
Hello,
I have PaperInput elements in a Polymer dom-repeat template. So, there are several, so on the #Listen I try to get the id, but it only retrieves id="labelAndInputContainer" (no matter what I do in the template).
Is there some trick to this? I've tried "everything" - over the past half a day!
Here is my HTML:
<template is="dom-repeat" items={{rgetThem}}>
<paper-card heading={{yyyy(item)}} >
<div class="card-content" >
<p style="color:red">ID:{{getID(item)}}</p>
<paper-input on-change="onchangepassword"
label='Password'
id={{getID(item)}}
floatingLabel>
</paper-input>
</div>
And the listener:
#Listen ('onchangepassword')
void onchangepassword(Event custEvent, var t) {
IronInput PI=custEvent.target;
Element yy=PI.parent;
String id=yy.id;
}
Any suggestions MOST welcome.
Thanks
Steve
You could try
Element yy=PI.parent.closest('paper-input');
The problem you're facing is paper-element encapsulates an iron-input element wrapped in div elements. Finding the closest paper-input will find the paper-input which the iron-input is encapsulated in, since that's the nearest one. I'm sure there are other ways to do it, but this works for me. In fact you could just do
Element yy=PI.closest('paper-input');
which will work just as well.
UPDATE:
Upon seeing the comment about dom-repeat event models, it occurs to me you may want a more Polymer Dart specific documentation link.
https://github.com/dart-lang/polymer-dart/wiki/data-binding-helper-elements#handling-events-in-dom-repeat-templates
As was suggested
model.item.id
And I'm not going to take credit for the updated part of my answer except the Dart specific link.
I have seen variations on the theme, but no clear answer. Basically I want an AngularJS Directive that registers a click and inserts extra content into a page, and then scrolls down a bit to make the new content visible. Here is the HTML
<li class="btn btn-default" ng-show="resto.link !== 'none'">
<p scroll-down onclick="void(0)">
Full review
<span class="glyphicon glyphicon-chevron-right right"></span>
</p>
</li>
</ul>
<div class="row">
<div class="col-xs-12" ng-bind-html="fullReview">
</div>
</div>
The onlick part is an Apple suggestion, that seems not to work.
And then I have:
.directive 'scrollDown', () ->
restrict: 'A'
link: (scope, $elm, attrs) ->
$elm.on 'click', (e) ->
e.preventDefault()
scope.getFullReview () ->
console.log "Scrolling'
$("body").animate
scrollTop: $elm.offset().top - 100
, "slow"
getFullReview() updates the model after an AJAX call, and then runs the callback.
This works fine in Chrome but not on the iOS simulator - basically a first tap makes the page move (but without triggering the console log - I think this is the URL bar regrowing) and a second is needed to trigger the Directive's link function. I have also installed fastclick as that was mentioned in some posts, but it did not help.
Need ideas :-) (Even some code that would tell me what event is being triggered by safari)
OK, Wow, I do not understand why, but the html above was the last markup on the page, so all of this was happening at the bottom of the screen. When I added some extra margin to the <ul> element, everything started working perfectly!! Bug in Safari?
Update 2: A The following repo on github shows the problem.
Update 1: Calling #firstNode in Template.editor.rendered returns <div class="editor"></div>.
I have the following template:
<template name="editor">
<div class="editor">
{{#each objects}}
<div class="object">{{content}}</div>
{{/each}}
</div>
</template>
The data is provided by iron-router in the data callback.
The coffeescript for my template:
Template.editor.rendered = ->
#findAll('.object').draggable()
When I go into my browser and try to drag one of the objects I get the text selection cursor and begin to select the text with the div instead of the object being dragged. So what is wrong and how can I get the drag and drop to work?
The drag and drop functionality is being provided by jquery-ui. Which is installed as a smart package.
Also feel free to edit the title of this post as I had a tough time coming up with one that made sense
The solution I found was to abstract <div class="object">{{content}}</div> into a seperate template like so:
<template name="object">
<div class="object">{{content}}</div>
</template>
Then change
Template.editor.rendered = ->
#findAll('.object').draggable()
to
Template.object.rendered = ->
#findAll('.object').draggable()
As stated in meteorpedia.
I'm trying to use jquery-ui sortable with nested templates in Meteor, as follows. Here are the two templates in question:
<template name="activityEditor">
{{! the main activity editor view }}
<div class="activity-editor">
<input type="text" name="title" class="input-xxlarge" value="{{info.title}}" placeholder="Type a title here...">
<div class="activity-steps">
{{#each info.steps}}
{{>activityStepEditor}}
{{/each}}
</div>
</div>
</template>
<template name="activityStepEditor">
{{! the container view for each step editor }}
<div class="activity-step" data-id="{{_id}}">
<div class="order">{{order}}</div>
{{!....stuff...}}
</div>
</template>
and the template code (using coffeescript):
_.extend Template.activityEditor, {
# ...stuff...
rendered: ->
$(".activity-steps").sortable {
items: '.activity-step'
handle: '.order'
update: ->
stepIds = ($(el).attr('data-id') for el in $('.activity-step'))
$('.activity-steps').empty() #this must be done in order to steps to re-render properly
Lab.Activity.reorderSteps stepIds
}
$(".activity-steps").disableSelection()
}
The only way I can get this code to work and properly rerender the order is by emptying the container of my sortable elements right after they update with $('.activity-steps').empty(). I've tried cancelling the update event and forcing a rerender by changing another variable watched in the context, but any change causes Exception from Meteor.flush(): undefined after which I can't rerender anything until page reload.
This seems to work, and everything rerenders great. So my question is: is there any reason why I shouldn't do this? Is there a better, standard practice way to handle the sortable that I'm not seeing?
In the near future there'll be a better way to do it, as Meteor team is developing its new rendering engine: http://youtube.com/watch?v=ISNEhPG0wnA
(in this video, Avital Oliver shows exactly a way to do it without redrawing the screen: the object in the list is actually moved on all clients)
See this Meteor's Github Wiki entry for more technical info:
http://github.com/meteor/meteor/wiki/New-Template-Engine-Preview
While that's not officially published, if you need it right now, you could try Nazar Leush's approach:
http://github.com/nleush/meteor-todos-sortable-animation
He also published a working example here: http://todos-dnd-animated.meteor.com