I implemented drag and drop functionality using ng2-dnd for my Angular 4 application. I have containers which can be sorted and items within each container which can also be sorted.
I want to restrict items within each containers from being re-assigned to another container.
There is a Container 1 and Container 2. Container 1 has Item1, Item2 and Container 2 has Item3, Item4. I want to restrict Item1 from being dropped into Container 2.
I tried using [allowDrop]="allowDropFunction()" but it did not work. What function can i use to restrict the drop?
You can use dropzones to allow dropping of an element into a target container. For example on the element you want to drag:
<div class="panel panel-default" dnd-draggable [dragEnabled]="true" [dropZones]="['zone1', 'zone2']">
<div class="panel-body">
<div>Drag Me</div>
<div>Zone 1 & 2</div>
</div>
</div>
And then on the target container(s):
<div dnd-droppable class="panel panel-info" [dropZones]="['zone1']" (onDropSuccess)="restrictedDrop1=$event">
<div class="panel-heading">Zone 1</div>
<div class="panel-body">
<div *ngIf="restrictedDrop1">Item was dropped here</div>
</div>
</div>
<div dnd-droppable class="panel panel-warning" [dropZones]="['zone2']" (onDropSuccess)="restrictedDrop2=$event">
<div class="panel-heading">Zone 2</div>
<div class="panel-body">
<div *ngIf="restrictedDrop2">Item was dropped here</div>
</div>
</div>
As long as the element that you want to drag has a matching dropzone in its dropZones property (which can be a string or an array), then the element can be dropped into the target container.
If want to change the dropzones you can do so dynamically using property binding.
Related
I have one use-case which requires "Drag-n-Drop" API. I want to drag one div to another but the content/text inside that should not get dragged along with the .
example:
<div class="dropzone">
<div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('',null)">
This div is draggable // ----> this should not get draggged when this div gets dragged.
</div> </div> <div class="dropzone"></div> <div class="dropzone"></div> <div class="dropzone"></div>
I have a form, and some the fields are set inside 3 groups of collapsible divs, I wan't after the validation that if any field has errors the parent div receive a class to unfold it.
<div class="panel-group" id="fields_panel">
<div class="panel panel-primary">
<div id="basic_info_fields" class="panel-collapse collapse in"> <!-- add class "in" -->>
<div class="panel-body">
<div class="row clearfix">
<div class="col-md-12 m-b-0">
<div class="form-group">
<div class="form-line error"> <!-- if this div has "error" -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I have two more panels with the same structure, eacho one with a couple of fields, I'm trying to find if any form-line has error and append to the panel-collapse parent the class in to unfold it.
Right now I have the following jquery code:
$(function () {
var elem = $('.panel').find('.form-line');
if (elem.hasClass('error')) {
elem.closest('.panel-collapse').addClass('in');
};
});
But it apply the in class to all panel-collapse.
What should I do to apply it only to the top level parent that have a child element with that class, and not to all parents?
Your hasClass won't work as elem is an array of jQuery objects - not just one.
Why do you need it - why not just include the class in your selector:
$('.panel').find('.form-line.error').closest('.panel-collapse').addClass('in');
This also stops you looping through elements in the array that doesn't have the class thus improving efficiency
Use following code:
$('.panel').find('.form-line.error').each(function(){
$(this).closest('.panel-collapse').addClass('in');
});
$(this) refers to the specified element which has the error class.
I've created a test page, where inside each blocks the divs are sortable. But how is it possible, to let the user drag the div out of it's parent, and put inside an another sortable div?
JSFiddle: http://jsfiddle.net/zq8bqufs/
Code:
$( ".sortable, body" ).sortable();
You can use the items option to determine which items inside the element should be sortable.
JSFIDDLE
HTML
<div class="sortable">
<div class="items">
<div class="items">asd</div>
<div class="items">eee</div>
<div class="items">fff</div>
</div>
<div class="items">asd</div>
<div class="items">
<div class="items">vvv</div>
<div class="items">abbsd</div>
<div class="items">mmm</div>
</div>
<div class="items">dsa</div>
</div>
Javascript
$('.sortable').sortable({
items: '.items'
});
You need to use connectWith, more about that here.
I updated (and simplified) your fiddle with that functionality here: http://jsfiddle.net/vrx6r264/
How to determine elements in the visible region of Div?
There are 2 div within main div.
The wrapper div contains many child div with overflow property.
On scrolling the document div i need to find out the visible
children div in the wrapper.
Below is HTML structure
<div class="main">
<div class="wrapper">
<div class="comment"></div>
<div class="comment"></div>
<div class="comment"></div>
<div class="comment"></div>
<div class="comment"></div>
</div>
<div class="document"></div>
</div>
Is there any possibility for finding the number of visible div in the window?
Try this:
$('wrapperdivselector').find("div:visible");
for length:
$('wrapperdivselector').find("div:visible").length;
Demo
use :visible try this
$('.orginalDiv1>.waprrer div:visible').someCommand()
or
$('.orginalDiv1>.waprrer').find('div:visible').lenght()
Consider the following HTML
<div class="sortcontainer">
<div class="item"> i1</div>
<div class="item"> i2</div>
<div class="item nondraggable"> i3</div>
<div class="item"> i4</div>
<div class="item"> i5</div>
<div class="item nondraggable"> i6</div>
<div class="item nondraggable"> i7</div>
<div class="item"> i8</div>
</div>
I am applying a sortable (jQuery UI) on the sortcontainer div.
I want to make some items (here i3, i6 and i7) non-draggable. But they should remain sortable in the list.
I tried disabling sorting for those items. If I do that, they will become non-draggable, but their position will be freezed. For example, once I disable them, i wont be able to drop anything between i6 and i7 as they are disabled.
I want to be able to make these elements non-draggable yet remain sortable.
Any ideas?
JSFiddle Link : Demo
Use the cancel parameter to set elements that should not be dragged.
cancel: '.nondraggable',
http://jsfiddle.net/ExplosionPIlls/pSe9c/1/