| Name | Type | Default |
|---|---|---|
| appendTo | String | 'parent' |
|
Sets or gets the import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<div class="main-container">
<div id="draggable-parent">
<jqxDragDrop #myDragDrop class="draggable"
[dropTarget]="'.drop-target'" [restricter]="'.main-container'" [appendTo]="'body'">
</jqxDragDrop>
<div class="drop-target">
<div class="label">I am a drop target</div>
</div>
</div>
</div>
`,
styles: [`
.row {
padding: 1px;
}
.draggable > div {
border: 1px solid #bbb;
background-color: #C9ECFF;
width: 100px;
height: 100px;
left: 30px;
top: 50px;
padding: 5px;
z-index: 2;
}
#draggable-parent {
background-color: #eeffee;
width: 350px;
height: 350px;
text-align: center;
border: 1px solid #eee;
float: left;
}
.main-container {
width: 650px;
z-index: 0;
}
.label {
position: relative;
font-family: Verdana;
font-size: 11px;
color: #000;
}
.drop-target {
background-color: #FBFFB5;
width: 150px;
height: 150px;
border: 1px solid #ddd;
margin-left: 190px;
margin-top: 70px;
z-index: 1;
}
`]
})
export class AppComponent {
}
|
||
| disabled | Boolean | false |
|
Sets or gets the import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<div class="main-container">
<div id="draggable-parent">
<jqxDragDrop #myDragDrop class="draggable"
[dropTarget]="'.drop-target'" [restricter]=".main-container" [disabled]="true">
</jqxDragDrop>
<div class="drop-target">
<div class="label">I am a drop target</div>
</div>
</div>
</div>
`,
styles: [`
.row {
padding: 1px;
}
.draggable > div {
border: 1px solid #bbb;
background-color: #C9ECFF;
width: 100px;
height: 100px;
left: 30px;
top: 50px;
padding: 5px;
z-index: 2;
}
#draggable-parent {
background-color: #eeffee;
width: 350px;
height: 350px;
text-align: center;
border: 1px solid #eee;
float: left;
}
.main-container {
width: 650px;
z-index: 0;
}
.label {
position: relative;
font-family: Verdana;
font-size: 11px;
color: #000;
}
.drop-target {
background-color: #FBFFB5;
width: 150px;
height: 150px;
border: 1px solid #ddd;
margin-left: 190px;
margin-top: 70px;
z-index: 1;
}
`]
})
export class AppComponent {
}
|
||
| distance | Number | 5 |
|
Sets or gets the import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<div class="main-container">
<div id="draggable-parent">
<jqxDragDrop #myDragDrop class="draggable"
[dropTarget]="'.drop-target'" [restricter]=".main-container" [distance]="12">
</jqxDragDrop>
<div class="drop-target">
<div class="label">I am a drop target</div>
</div>
</div>
</div>
`,
styles: [`
.row {
padding: 1px;
}
.draggable > div {
border: 1px solid #bbb;
background-color: #C9ECFF;
width: 100px;
height: 100px;
left: 30px;
top: 50px;
padding: 5px;
z-index: 2;
}
#draggable-parent {
background-color: #eeffee;
width: 350px;
height: 350px;
text-align: center;
border: 1px solid #eee;
float: left;
}
.main-container {
width: 650px;
z-index: 0;
}
.label {
position: relative;
font-family: Verdana;
font-size: 11px;
color: #000;
}
.drop-target {
background-color: #FBFFB5;
width: 150px;
height: 150px;
border: 1px solid #ddd;
margin-left: 190px;
margin-top: 70px;
z-index: 1;
}
`]
})
export class AppComponent {
}
|
||
| data | Any | null |
|
Sets or gets the import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<div class="main-container">
<div id="draggable-parent">
<jqxDragDrop #myDragDrop class="draggable"
[dropTarget]="'.drop-target'" [restricter]=".main-container" [data]="{foo: 'foo', bar: 'bar'}">
</jqxDragDrop>
<div class="drop-target">
<div class="label">I am a drop target</div>
</div>
</div>
</div>
`,
styles: [`
.row {
padding: 1px;
}
.draggable > div {
border: 1px solid #bbb;
background-color: #C9ECFF;
width: 100px;
height: 100px;
left: 30px;
top: 50px;
padding: 5px;
z-index: 2;
}
#draggable-parent {
background-color: #eeffee;
width: 350px;
height: 350px;
text-align: center;
border: 1px solid #eee;
float: left;
}
.main-container {
width: 650px;
z-index: 0;
}
.label {
position: relative;
font-family: Verdana;
font-size: 11px;
color: #000;
}
.drop-target {
background-color: #FBFFB5;
width: 150px;
height: 150px;
border: 1px solid #ddd;
margin-left: 190px;
margin-top: 70px;
z-index: 1;
}
`]
})
export class AppComponent {
}
|
||
| dropAction | enum:DragDropDropAction | 'default' |
|
enum DragDropDropAction {
default, none } Sets or gets the import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<div class="main-container">
<div id="draggable-parent">
<jqxDragDrop #myDragDrop class="draggable"
[dropTarget]="'.drop-target'" [restricter]="'.main-container'" [dropAction]="'none'">
</jqxDragDrop>
<div class="drop-target">
<div class="label">I am a drop target</div>
</div>
</div>
</div>
`,
styles: [`
.row {
padding: 1px;
}
.draggable > div {
border: 1px solid #bbb;
background-color: #C9ECFF;
width: 100px;
height: 100px;
left: 30px;
top: 50px;
padding: 5px;
z-index: 2;
}
#draggable-parent {
background-color: #eeffee;
width: 350px;
height: 350px;
text-align: center;
border: 1px solid #eee;
float: left;
}
.main-container {
width: 650px;
z-index: 0;
}
.label {
position: relative;
font-family: Verdana;
font-size: 11px;
color: #000;
}
.drop-target {
background-color: #FBFFB5;
width: 150px;
height: 150px;
border: 1px solid #ddd;
margin-left: 190px;
margin-top: 70px;
z-index: 1;
}
`]
})
export class AppComponent {
}
|
||
| dropTarget | Any | null |
|
Sets or gets the import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<div class="main-container">
<div id="draggable-parent">
<jqxDragDrop #myDragDrop class="draggable"
[dropTarget]="'.drop-target'" [restricter]=".main-container" [dropTarget]=".dropTarget">
</jqxDragDrop>
<div class="drop-target">
<div class="label">I am a drop target</div>
</div>
</div>
</div>
`,
styles: [`
.row {
padding: 1px;
}
.draggable > div {
border: 1px solid #bbb;
background-color: #C9ECFF;
width: 100px;
height: 100px;
left: 30px;
top: 50px;
padding: 5px;
z-index: 2;
}
#draggable-parent {
background-color: #eeffee;
width: 350px;
height: 350px;
text-align: center;
border: 1px solid #eee;
float: left;
}
.main-container {
width: 650px;
z-index: 0;
}
.label {
position: relative;
font-family: Verdana;
font-size: 11px;
color: #000;
}
.drop-target {
background-color: #FBFFB5;
width: 150px;
height: 150px;
border: 1px solid #ddd;
margin-left: 190px;
margin-top: 70px;
z-index: 1;
}
`]
})
export class AppComponent {
}
|
||
| dragZIndex | Number | 99999 |
|
Sets or gets the import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<div class="main-container">
<div id="draggable-parent">
<jqxDragDrop #myDragDrop class="draggable"
[dropTarget]="'.drop-target'" [restricter]=".main-container" [dragZIndex]="6">
</jqxDragDrop>
<div class="drop-target">
<div class="label">I am a drop target</div>
</div>
</div>
</div>
`,
styles: [`
.row {
padding: 1px;
}
.draggable > div {
border: 1px solid #bbb;
background-color: #C9ECFF;
width: 100px;
height: 100px;
left: 30px;
top: 50px;
padding: 5px;
z-index: 2;
}
#draggable-parent {
background-color: #eeffee;
width: 350px;
height: 350px;
text-align: center;
border: 1px solid #eee;
float: left;
}
.main-container {
width: 650px;
z-index: 0;
}
.label {
position: relative;
font-family: Verdana;
font-size: 11px;
color: #000;
}
.drop-target {
background-color: #FBFFB5;
width: 150px;
height: 150px;
border: 1px solid #ddd;
margin-left: 190px;
margin-top: 70px;
z-index: 1;
}
`]
})
export class AppComponent {
}
|
||
| feedback | enum:DragDropFeedBack | 'clone' |
|
enum DragDropFeedBack {
clone, original } Sets or gets the import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<div class="main-container">
<div id="draggable-parent">
<jqxDragDrop #myDragDrop class="draggable"
[dropTarget]="'.drop-target'" [restricter]="'.main-container'" [feedback]="'original'">
</jqxDragDrop>
<div class="drop-target">
<div class="label">I am a drop target</div>
</div>
</div>
</div>
`,
styles: [`
.row {
padding: 1px;
}
.draggable > div {
border: 1px solid #bbb;
background-color: #C9ECFF;
width: 100px;
height: 100px;
left: 30px;
top: 50px;
padding: 5px;
z-index: 2;
}
#draggable-parent {
background-color: #eeffee;
width: 350px;
height: 350px;
text-align: center;
border: 1px solid #eee;
float: left;
}
.main-container {
width: 650px;
z-index: 0;
}
.label {
position: relative;
font-family: Verdana;
font-size: 11px;
color: #000;
}
.drop-target {
background-color: #FBFFB5;
width: 150px;
height: 150px;
border: 1px solid #ddd;
margin-left: 190px;
margin-top: 70px;
z-index: 1;
}
`]
})
export class AppComponent {
}
|
||
| initFeedback | (feedback?:Any) => Void | null |
|
Sets or gets the import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<div class="main-container">
<div id="draggable-parent">
<jqxDragDrop #myDragDrop class="draggable"
[dropTarget]="'.drop-target'" [restricter]=".main-container" [initFeedback]="initFeedback">
</jqxDragDrop>
<div class="drop-target">
<div class="label">I am a drop target</div>
</div>
</div>
</div>
`,
styles: [`
.row {
padding: 1px;
}
.draggable > div {
border: 1px solid #bbb;
background-color: #C9ECFF;
width: 100px;
height: 100px;
left: 30px;
top: 50px;
padding: 5px;
z-index: 2;
}
#draggable-parent {
background-color: #eeffee;
width: 350px;
height: 350px;
text-align: center;
border: 1px solid #eee;
float: left;
}
.main-container {
width: 650px;
z-index: 0;
}
.label {
position: relative;
font-family: Verdana;
font-size: 11px;
color: #000;
}
.drop-target {
background-color: #FBFFB5;
width: 150px;
height: 150px;
border: 1px solid #ddd;
margin-left: 190px;
margin-top: 70px;
z-index: 1;
}
`]
})
export class AppComponent {
}
|
||
| opacity | Number | 0.6 |
|
Sets or gets the import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<div class="main-container">
<div id="draggable-parent">
<jqxDragDrop #myDragDrop class="draggable"
[dropTarget]="'.drop-target'" [restricter]=".main-container" [opacity]="0.3">
</jqxDragDrop>
<div class="drop-target">
<div class="label">I am a drop target</div>
</div>
</div>
</div>
`,
styles: [`
.row {
padding: 1px;
}
.draggable > div {
border: 1px solid #bbb;
background-color: #C9ECFF;
width: 100px;
height: 100px;
left: 30px;
top: 50px;
padding: 5px;
z-index: 2;
}
#draggable-parent {
background-color: #eeffee;
width: 350px;
height: 350px;
text-align: center;
border: 1px solid #eee;
float: left;
}
.main-container {
width: 650px;
z-index: 0;
}
.label {
position: relative;
font-family: Verdana;
font-size: 11px;
color: #000;
}
.drop-target {
background-color: #FBFFB5;
width: 150px;
height: 150px;
border: 1px solid #ddd;
margin-left: 190px;
margin-top: 70px;
z-index: 1;
}
`]
})
export class AppComponent {
}
|
||
| onDragEnd | () => Void | null |
|
Sets or gets the import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<div class="main-container">
<div id="draggable-parent">
<jqxDragDrop #myDragDrop class="draggable"
[dropTarget]="'.drop-target'" [restricter]=".main-container" [onDragEnd]="onDragEnd">
</jqxDragDrop>
<div class="drop-target">
<div class="label">I am a drop target</div>
</div>
</div>
</div>
`,
styles: [`
.row {
padding: 1px;
}
.draggable > div {
border: 1px solid #bbb;
background-color: #C9ECFF;
width: 100px;
height: 100px;
left: 30px;
top: 50px;
padding: 5px;
z-index: 2;
}
#draggable-parent {
background-color: #eeffee;
width: 350px;
height: 350px;
text-align: center;
border: 1px solid #eee;
float: left;
}
.main-container {
width: 650px;
z-index: 0;
}
.label {
position: relative;
font-family: Verdana;
font-size: 11px;
color: #000;
}
.drop-target {
background-color: #FBFFB5;
width: 150px;
height: 150px;
border: 1px solid #ddd;
margin-left: 190px;
margin-top: 70px;
z-index: 1;
}
`]
})
export class AppComponent {
}
|
||
| onDrag | (data?: Any, position?: Any) => Void | null |
|
Sets or gets the import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<div class="main-container">
<div id="draggable-parent">
<jqxDragDrop #myDragDrop class="draggable"
[dropTarget]="'.drop-target'" [restricter]=".main-container" [onDrag]="onDrag">
</jqxDragDrop>
<div class="drop-target">
<div class="label">I am a drop target</div>
</div>
</div>
</div>
`,
styles: [`
.row {
padding: 1px;
}
.draggable > div {
border: 1px solid #bbb;
background-color: #C9ECFF;
width: 100px;
height: 100px;
left: 30px;
top: 50px;
padding: 5px;
z-index: 2;
}
#draggable-parent {
background-color: #eeffee;
width: 350px;
height: 350px;
text-align: center;
border: 1px solid #eee;
float: left;
}
.main-container {
width: 650px;
z-index: 0;
}
.label {
position: relative;
font-family: Verdana;
font-size: 11px;
color: #000;
}
.drop-target {
background-color: #FBFFB5;
width: 150px;
height: 150px;
border: 1px solid #ddd;
margin-left: 190px;
margin-top: 70px;
z-index: 1;
}
`]
})
export class AppComponent {
}
|
||
| onDragStart | (position?: Any) => Void | null |
|
Sets or gets the import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<div class="main-container">
<div id="draggable-parent">
<jqxDragDrop #myDragDrop class="draggable"
[dropTarget]="'.drop-target'" [restricter]=".main-container" [onDragStart]="onDragStart">
</jqxDragDrop>
<div class="drop-target">
<div class="label">I am a drop target</div>
</div>
</div>
</div>
`,
styles: [`
.row {
padding: 1px;
}
.draggable > div {
border: 1px solid #bbb;
background-color: #C9ECFF;
width: 100px;
height: 100px;
left: 30px;
top: 50px;
padding: 5px;
z-index: 2;
}
#draggable-parent {
background-color: #eeffee;
width: 350px;
height: 350px;
text-align: center;
border: 1px solid #eee;
float: left;
}
.main-container {
width: 650px;
z-index: 0;
}
.label {
position: relative;
font-family: Verdana;
font-size: 11px;
color: #000;
}
.drop-target {
background-color: #FBFFB5;
width: 150px;
height: 150px;
border: 1px solid #ddd;
margin-left: 190px;
margin-top: 70px;
z-index: 1;
}
`]
})
export class AppComponent {
}
|
||
| onTargetDrop | (data?: Any) => Void | null |
|
Sets or gets the import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<div class="main-container">
<div id="draggable-parent">
<jqxDragDrop #myDragDrop class="draggable"
[dropTarget]="'.drop-target'" [restricter]=".main-container" [onTargetDrop]="onTargetDrop">
</jqxDragDrop>
<div class="drop-target">
<div class="label">I am a drop target</div>
</div>
</div>
</div>
`,
styles: [`
.row {
padding: 1px;
}
.draggable > div {
border: 1px solid #bbb;
background-color: #C9ECFF;
width: 100px;
height: 100px;
left: 30px;
top: 50px;
padding: 5px;
z-index: 2;
}
#draggable-parent {
background-color: #eeffee;
width: 350px;
height: 350px;
text-align: center;
border: 1px solid #eee;
float: left;
}
.main-container {
width: 650px;
z-index: 0;
}
.label {
position: relative;
font-family: Verdana;
font-size: 11px;
color: #000;
}
.drop-target {
background-color: #FBFFB5;
width: 150px;
height: 150px;
border: 1px solid #ddd;
margin-left: 190px;
margin-top: 70px;
z-index: 1;
}
`]
})
export class AppComponent {
}
|
||
| onDropTargetEnter | () => Void | null |
|
Sets or gets the import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<div class="main-container">
<div id="draggable-parent">
<jqxDragDrop #myDragDrop class="draggable"
[dropTarget]="'.drop-target'" [restricter]=".main-container" [onDropTargetEnter]="onDropTargetEnter">
</jqxDragDrop>
<div class="drop-target">
<div class="label">I am a drop target</div>
</div>
</div>
</div>
`,
styles: [`
.row {
padding: 1px;
}
.draggable > div {
border: 1px solid #bbb;
background-color: #C9ECFF;
width: 100px;
height: 100px;
left: 30px;
top: 50px;
padding: 5px;
z-index: 2;
}
#draggable-parent {
background-color: #eeffee;
width: 350px;
height: 350px;
text-align: center;
border: 1px solid #eee;
float: left;
}
.main-container {
width: 650px;
z-index: 0;
}
.label {
position: relative;
font-family: Verdana;
font-size: 11px;
color: #000;
}
.drop-target {
background-color: #FBFFB5;
width: 150px;
height: 150px;
border: 1px solid #ddd;
margin-left: 190px;
margin-top: 70px;
z-index: 1;
}
`]
})
export class AppComponent {
}
|
||
| onDropTargetLeave | (data?: Any) => Void | null |
|
Sets or gets the import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<div class="main-container">
<div id="draggable-parent">
<jqxDragDrop #myDragDrop class="draggable"
[dropTarget]="'.drop-target'" [restricter]=".main-container" [onDropTargetLeave]="onDropTargetLeave">
</jqxDragDrop>
<div class="drop-target">
<div class="label">I am a drop target</div>
</div>
</div>
</div>
`,
styles: [`
.row {
padding: 1px;
}
.draggable > div {
border: 1px solid #bbb;
background-color: #C9ECFF;
width: 100px;
height: 100px;
left: 30px;
top: 50px;
padding: 5px;
z-index: 2;
}
#draggable-parent {
background-color: #eeffee;
width: 350px;
height: 350px;
text-align: center;
border: 1px solid #eee;
float: left;
}
.main-container {
width: 650px;
z-index: 0;
}
.label {
position: relative;
font-family: Verdana;
font-size: 11px;
color: #000;
}
.drop-target {
background-color: #FBFFB5;
width: 150px;
height: 150px;
border: 1px solid #ddd;
margin-left: 190px;
margin-top: 70px;
z-index: 1;
}
`]
})
export class AppComponent {
}
|
||
| restricter | enum:DragDropRestricter | 'document' |
|
enum DragDropRestricter {
body, document, parent, { left, top, width, height } } Sets or gets the import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<div class="main-container">
<div id="draggable-parent">
<jqxDragDrop #myDragDrop class="draggable"
[dropTarget]="'.drop-target'" [restricter]=".main-container">
</jqxDragDrop>
<div class="drop-target">
<div class="label">I am a drop target</div>
</div>
</div>
</div>
`,
styles: [`
.row {
padding: 1px;
}
.draggable > div {
border: 1px solid #bbb;
background-color: #C9ECFF;
width: 100px;
height: 100px;
left: 30px;
top: 50px;
padding: 5px;
z-index: 2;
}
#draggable-parent {
background-color: #eeffee;
width: 350px;
height: 350px;
text-align: center;
border: 1px solid #eee;
float: left;
}
.main-container {
width: 650px;
z-index: 0;
}
.label {
position: relative;
font-family: Verdana;
font-size: 11px;
color: #000;
}
.drop-target {
background-color: #FBFFB5;
width: 150px;
height: 150px;
border: 1px solid #ddd;
margin-left: 190px;
margin-top: 70px;
z-index: 1;
}
`]
})
export class AppComponent {
}
|
||
| revert | Boolean | false |
|
Sets or gets the import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<div class="main-container">
<div id="draggable-parent">
<jqxDragDrop #myDragDrop class="draggable"
[dropTarget]="'.drop-target'" [restricter]=".main-container" [revert]="true">
</jqxDragDrop>
<div class="drop-target">
<div class="label">I am a drop target</div>
</div>
</div>
</div>
`,
styles: [`
.row {
padding: 1px;
}
.draggable > div {
border: 1px solid #bbb;
background-color: #C9ECFF;
width: 100px;
height: 100px;
left: 30px;
top: 50px;
padding: 5px;
z-index: 2;
}
#draggable-parent {
background-color: #eeffee;
width: 350px;
height: 350px;
text-align: center;
border: 1px solid #eee;
float: left;
}
.main-container {
width: 650px;
z-index: 0;
}
.label {
position: relative;
font-family: Verdana;
font-size: 11px;
color: #000;
}
.drop-target {
background-color: #FBFFB5;
width: 150px;
height: 150px;
border: 1px solid #ddd;
margin-left: 190px;
margin-top: 70px;
z-index: 1;
}
`]
})
export class AppComponent {
}
|
||
| revertDuration | Number | 400 |
|
Sets or gets the import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<div class="main-container">
<div id="draggable-parent">
<jqxDragDrop #myDragDrop class="draggable"
[dropTarget]="'.drop-target'" [restricter]=".main-container" [revertDuration]="300" [revert]="true">
</jqxDragDrop>
<div class="drop-target">
<div class="label">I am a drop target</div>
</div>
</div>
</div>
`,
styles: [`
.row {
padding: 1px;
}
.draggable > div {
border: 1px solid #bbb;
background-color: #C9ECFF;
width: 100px;
height: 100px;
left: 30px;
top: 50px;
padding: 5px;
z-index: 2;
}
#draggable-parent {
background-color: #eeffee;
width: 350px;
height: 350px;
text-align: center;
border: 1px solid #eee;
float: left;
}
.main-container {
width: 650px;
z-index: 0;
}
.label {
position: relative;
font-family: Verdana;
font-size: 11px;
color: #000;
}
.drop-target {
background-color: #FBFFB5;
width: 150px;
height: 150px;
border: 1px solid #ddd;
margin-left: 190px;
margin-top: 70px;
z-index: 1;
}
`]
})
export class AppComponent {
}
|
||
| tolerance | enum:DragDropTolerance | 'intersect' |
|
enum DragDropTolerance {
fit, intersect } Sets or gets the import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<div class="main-container">
<div id="draggable-parent">
<jqxDragDrop #myDragDrop class="draggable"
[dropTarget]="'.drop-target'" [restricter]="'.main-container'" [tolerance]="'fit'">
</jqxDragDrop>
<div class="drop-target">
<div class="label">I am a drop target</div>
</div>
</div>
</div>
`,
styles: [`
.row {
padding: 1px;
}
.draggable > div {
border: 1px solid #bbb;
background-color: #C9ECFF;
width: 100px;
height: 100px;
left: 30px;
top: 50px;
padding: 5px;
z-index: 2;
}
#draggable-parent {
background-color: #eeffee;
width: 350px;
height: 350px;
text-align: center;
border: 1px solid #eee;
float: left;
}
.main-container {
width: 650px;
z-index: 0;
}
.label {
position: relative;
font-family: Verdana;
font-size: 11px;
color: #000;
}
.drop-target {
background-color: #FBFFB5;
width: 150px;
height: 150px;
border: 1px solid #ddd;
margin-left: 190px;
margin-top: 70px;
z-index: 1;
}
`]
})
export class AppComponent {
}
|
||
Events |
||
| dragStart | Event | |
|
This event is triggered when the item is dragged for first time. Code examples
Bind to the
import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<div class="main-container">
<div id="draggable-parent">
<jqxDragDrop #myDragDrop class="draggable" (onDragStart)="DragStart($event)"
[dropTarget]="'.drop-target'" [restricter]=".main-container">
</jqxDragDrop>
<div class="drop-target">
<div class="label">I am a drop target</div>
</div>
</div>
</div>
`,
styles: [`
.row {
padding: 1px;
}
.draggable > div {
border: 1px solid #bbb;
background-color: #C9ECFF;
width: 100px;
height: 100px;
left: 30px;
top: 50px;
padding: 5px;
z-index: 2;
}
#draggable-parent {
background-color: #eeffee;
width: 350px;
height: 350px;
text-align: center;
border: 1px solid #eee;
float: left;
}
.main-container {
width: 650px;
z-index: 0;
}
.label {
position: relative;
font-family: Verdana;
font-size: 11px;
color: #000;
}
.drop-target {
background-color: #FBFFB5;
width: 150px;
height: 150px;
border: 1px solid #ddd;
margin-left: 190px;
margin-top: 70px;
z-index: 1;
}
`]
})
export class AppComponent {
DragStart(event: any): void
{
// Do Something
}
|
||
| dragEnd | Event | |
|
This event is triggered when the item is dropped. Code examples
Bind to the
import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<div class="main-container">
<div id="draggable-parent">
<jqxDragDrop #myDragDrop class="draggable" (onDragEnd)="DragEnd($event)"
[dropTarget]="'.drop-target'" [restricter]=".main-container">
</jqxDragDrop>
<div class="drop-target">
<div class="label">I am a drop target</div>
</div>
</div>
</div>
`,
styles: [`
.row {
padding: 1px;
}
.draggable > div {
border: 1px solid #bbb;
background-color: #C9ECFF;
width: 100px;
height: 100px;
left: 30px;
top: 50px;
padding: 5px;
z-index: 2;
}
#draggable-parent {
background-color: #eeffee;
width: 350px;
height: 350px;
text-align: center;
border: 1px solid #eee;
float: left;
}
.main-container {
width: 650px;
z-index: 0;
}
.label {
position: relative;
font-family: Verdana;
font-size: 11px;
color: #000;
}
.drop-target {
background-color: #FBFFB5;
width: 150px;
height: 150px;
border: 1px solid #ddd;
margin-left: 190px;
margin-top: 70px;
z-index: 1;
}
`]
})
export class AppComponent {
DragEnd(event: any): void
{
// Do Something
}
|
||
| dragging | Event | |
|
This event is triggered while the item is dragging. Code examples
Bind to the
import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<div class="main-container">
<div id="draggable-parent">
<jqxDragDrop #myDragDrop class="draggable" (onDragging)="Dragging($event)"
[dropTarget]="'.drop-target'" [restricter]=".main-container">
</jqxDragDrop>
<div class="drop-target">
<div class="label">I am a drop target</div>
</div>
</div>
</div>
`,
styles: [`
.row {
padding: 1px;
}
.draggable > div {
border: 1px solid #bbb;
background-color: #C9ECFF;
width: 100px;
height: 100px;
left: 30px;
top: 50px;
padding: 5px;
z-index: 2;
}
#draggable-parent {
background-color: #eeffee;
width: 350px;
height: 350px;
text-align: center;
border: 1px solid #eee;
float: left;
}
.main-container {
width: 650px;
z-index: 0;
}
.label {
position: relative;
font-family: Verdana;
font-size: 11px;
color: #000;
}
.drop-target {
background-color: #FBFFB5;
width: 150px;
height: 150px;
border: 1px solid #ddd;
margin-left: 190px;
margin-top: 70px;
z-index: 1;
}
`]
})
export class AppComponent {
Dragging(event: any): void
{
// Do Something
}
|
||
| dropTargetEnter | Event | |
|
This event is triggered when the draggable item is over it's drop target for first time. Code examples
Bind to the
import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<div class="main-container">
<div id="draggable-parent">
<jqxDragDrop #myDragDrop class="draggable" (onDropTargetEnter)="DropTargetEnter($event)"
[dropTarget]="'.drop-target'" [restricter]=".main-container">
</jqxDragDrop>
<div class="drop-target">
<div class="label">I am a drop target</div>
</div>
</div>
</div>
`,
styles: [`
.row {
padding: 1px;
}
.draggable > div {
border: 1px solid #bbb;
background-color: #C9ECFF;
width: 100px;
height: 100px;
left: 30px;
top: 50px;
padding: 5px;
z-index: 2;
}
#draggable-parent {
background-color: #eeffee;
width: 350px;
height: 350px;
text-align: center;
border: 1px solid #eee;
float: left;
}
.main-container {
width: 650px;
z-index: 0;
}
.label {
position: relative;
font-family: Verdana;
font-size: 11px;
color: #000;
}
.drop-target {
background-color: #FBFFB5;
width: 150px;
height: 150px;
border: 1px solid #ddd;
margin-left: 190px;
margin-top: 70px;
z-index: 1;
}
`]
})
export class AppComponent {
DropTargetEnter(event: any): void
{
// Do Something
}
|
||
| dropTargetLeave | Event | |
|
This event is triggered when the draggable item leave it's drop target. Code examples
Bind to the
import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<div class="main-container">
<div id="draggable-parent">
<jqxDragDrop #myDragDrop class="draggable" (onDropTargetLeave)="DropTargetLeave($event)"
[dropTarget]="'.drop-target'" [restricter]=".main-container">
</jqxDragDrop>
<div class="drop-target">
<div class="label">I am a drop target</div>
</div>
</div>
</div>
`,
styles: [`
.row {
padding: 1px;
}
.draggable > div {
border: 1px solid #bbb;
background-color: #C9ECFF;
width: 100px;
height: 100px;
left: 30px;
top: 50px;
padding: 5px;
z-index: 2;
}
#draggable-parent {
background-color: #eeffee;
width: 350px;
height: 350px;
text-align: center;
border: 1px solid #eee;
float: left;
}
.main-container {
width: 650px;
z-index: 0;
}
.label {
position: relative;
font-family: Verdana;
font-size: 11px;
color: #000;
}
.drop-target {
background-color: #FBFFB5;
width: 150px;
height: 150px;
border: 1px solid #ddd;
margin-left: 190px;
margin-top: 70px;
z-index: 1;
}
`]
})
export class AppComponent {
DropTargetLeave(event: any): void
{
// Do Something
}
|
||
Methods |
||
| Name | Return Type | Arguments |