| Name | Type | Default |
|---|
|
appendTo
|
String
|
'parent'
|
Sets or gets the appendTo property.
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 disabled property.
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 distance property.
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 data property.
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 dropAction property.
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 dropTarget property.
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 dragZIndex property.
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 feedback property.
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 initFeedback property.
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 opacity property.
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 onDragEnd property.
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 onDrag property.
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 onDragStart property.
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 onTargetDrop property.
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 onDropTargetEnter property.
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 onDropTargetLeave property.
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 restricter property.
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 revert property.
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 revertDuration property.
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 tolerance property.
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 {
}
|
|
|
|
dragStart
|
Event
|
|
This event is triggered when the item is dragged for first time.
Code examples
Bind to the dragStart event of jqxDragDrop.
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 dragEnd event of jqxDragDrop.
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 dragging event of jqxDragDrop.
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 dropTargetEnter event of jqxDragDrop.
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 dropTargetLeave event of jqxDragDrop.
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
}
}
|
|
|
| Name | Return Type | Arguments |
|---|