Skip to content

Commit eafc22b

Browse files
keerthanaRajendrankeerthanaRajendran
authored
Merge pull request #4062 from syncfusion-content/ES-946908-chips-docs-hf
946908: UG document for Chip drag and drop feature in Core and Mvc pl…
2 parents 6a95a11 + 5005747 commit eafc22b

File tree

6 files changed

+153
-0
lines changed

6 files changed

+153
-0
lines changed

‎ej2-asp-core-mvc/chips/draganddrop.md

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
---
2+
layout: post
3+
title: Drag and drop in ##Platform_Name## Chips Control | Syncfusion
4+
description: Learn here all about Drag and drop in Syncfusion ##Platform_Name## Chips control of Syncfusion Essential JS 2 and more.
5+
platform: ej2-asp-core-mvc
6+
control: Drag and drop
7+
publishingplatform: ##Platform_Name##
8+
documentation: ug
9+
---
10+
11+
# Drag and drop in Chips control
12+
13+
The Chips control enables drag and drop functionality for any chip when [`allowDragAndDrop`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.buttons.chiplist.html#Syncfusion_EJ2_Buttons_ChipList_AllowDragAndDrop) is set to **true**. Chips can be dragged and dropped within the same or across external ChipList containers.
14+
15+
When dragging a chip, an indicator line appears between chips, showing the exact position where the chip will be dropped. This visual indicator helps users place chips precisely at the desired location.
16+
17+
* To prevent dragging action for a specific chip, use the [`dragStart`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.buttons.chiplist.html#Syncfusion_EJ2_Buttons_ChipList_DragStart) event, which triggers when chip dragging begins. Similarly, to prevent dropping action for a specific chip, use the [`dragStop`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.buttons.chiplist.html#Syncfusion_EJ2_Buttons_ChipList_DragStop) event, which triggers when dragging ends.
18+
19+
* The [`dragging`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.buttons.chiplist.html#Syncfusion_EJ2_Buttons_ChipList_Dragging) event triggers while a chip is being dragged. You can customize the appearance of the cloned chip element during this event.
20+
21+
* You can set the drag area for the chips using the [`dragArea`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.buttons.chiplist.html#Syncfusion_EJ2_Buttons_ChipList_DragArea) property which allows the dragging of cloned chip only within the specified element. It accepts an element Id or class as a string and defaults to `null`.
22+
23+
In the following sample, the [`allowDragAndDrop`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.buttons.chiplist.html#Syncfusion_EJ2_Buttons_ChipList_AllowDragAndDrop) property is enabled.
24+
25+
{% if page.publishingplatform == "aspnet-core" %}
26+
27+
{% tabs %}
28+
{% highlight cshtml tabtitle="CSHTML" %}
29+
{% include code-snippet/chips/draganddrop/tagHelper %}
30+
{% endhighlight %}
31+
{% endtabs %}
32+
33+
{% elsif page.publishingplatform == "aspnet-mvc" %}
34+
35+
{% tabs %}
36+
{% highlight razor tabtitle="CSHTML" %}
37+
{% include code-snippet/chips/draganddrop/razor %}
38+
{% endhighlight %}
39+
{% highlight c# tabtitle="Default.cs" %}
40+
{% include code-snippet/chips/draganddrop/default.cs %}
41+
{% endhighlight %}
42+
{% endtabs %}
43+
{% endif %}

‎ej2-asp-core-mvc/code-snippet/chips/draganddrop/default.cs

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
public IActionResult Index()
2+
{
3+
return View();
4+
}

‎ej2-asp-core-mvc/code-snippet/chips/draganddrop/razor

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<div id="chip-draganddrop-wrapper">
2+
<div class="chips-headers">Customize your order with add-ons</div>
3+
4+
<div class="sample-padding">
5+
@Html.EJS().ChipList("choice-container").Chips(chip =>
6+
{
7+
chip.Text("Report").CssClass("e-info").Add();
8+
chip.Text("Meeting").CssClass("e-warning").Add();
9+
chip.Text("Review").CssClass("e-warning").Add();
10+
chip.Text("Budget").CssClass("e-danger").Add();
11+
chip.Text("Design").CssClass("e-primary").Add();
12+
chip.Text("Presentation").CssClass("e-success").Add();
13+
chip.Text("Email").CssClass("e-success").Add();
14+
chip.Text("Research").CssClass("e-success").Add();
15+
}).AllowDragAndDrop(true).Render()
16+
@Html.EJS().ChipList("selection-container").AllowDragAndDrop(true).Render();
17+
</div>
18+
</div>
19+
20+
<style>
21+
#chip-draganddrop-wrapper .sample-padding {
22+
padding: 10px;
23+
display: flex;
24+
justify-content: center;
25+
align-items: center;
26+
}
27+
28+
.chips-headers {
29+
font-size: 12px;
30+
text-align: center;
31+
padding-top: 10px;
32+
}
33+
34+
#choice-container {
35+
width: 400px;
36+
min-height: 100px;
37+
min-width: 150px;
38+
border: 2px solid #2C3E50;
39+
border-radius: 10px;
40+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
41+
margin-right: 30px;
42+
}
43+
44+
#selection-container {
45+
width: 400px;
46+
min-height: 100px;
47+
min-width: 150px;
48+
border: 2px solid #8E44AD;
49+
border-radius: 10px;
50+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
51+
}
52+
</style>

‎ej2-asp-core-mvc/code-snippet/chips/draganddrop/tagHelper

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<div id="chip-draganddrop-wrapper">
2+
<div class="chips-headers">Customize your order with add-ons</div>
3+
<div class="sample-padding">
4+
<ejs-chiplist id="choice-container" allowDragAndDrop>
5+
<e-chips>
6+
<e-chip text="Report" cssClass="e-info"></e-chip>
7+
<e-chip text="Meeting" cssClass="e-warning"></e-chip>
8+
<e-chip text="Review" cssClass="e-warning"></e-chip>
9+
<e-chip text="Budget" cssClass="e-danger"></e-chip>
10+
<e-chip text="Design" cssClass="e-primary"></e-chip>
11+
<e-chip text="Presentation" cssClass="e-success"></e-chip>
12+
<e-chip text="Email" cssClass="e-success"></e-chip>
13+
<e-chip text="Research" cssClass="e-success"></e-chip>
14+
</e-chips>
15+
</ejs-chiplist>
16+
<ejs-chiplist id="selection-container" allowDragAndDrop></ejs-chiplist>
17+
</div>
18+
</div>
19+
20+
<style>
21+
#chip-draganddrop-wrapper .sample-padding {
22+
padding: 10px;
23+
display: flex;
24+
justify-content: center;
25+
align-items: center;
26+
}
27+
28+
.chips-headers {
29+
font-size: 12px;
30+
text-align: center;
31+
padding-top: 10px;
32+
}
33+
34+
#choice-container {
35+
width: 400px;
36+
min-height: 100px;
37+
min-width: 150px;
38+
border: 2px solid #2C3E50;
39+
border-radius: 10px;
40+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
41+
margin-right: 30px;
42+
}
43+
44+
#selection-container {
45+
width: 400px;
46+
min-height: 100px;
47+
min-width: 150px;
48+
border: 2px solid #8E44AD;
49+
border-radius: 10px;
50+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
51+
}
52+
</style>

‎ej2-asp-core-toc.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -618,6 +618,7 @@
618618
<ul>
619619
<li><a href="/ej2-asp-core/chips/getting-started">Getting Started</a></li>
620620
<li><a href="/ej2-asp-core/chips/types">Types</a></li>
621+
<li><a href="/ej2-asp-core/chips/draganddrop">Drag and Drop</a></li>
621622
<li><a href="/ej2-asp-core/chips/customization">Chip Customization</a></li>
622623
<li><a href="/ej2-asp-core/chips/style">CSS Structure</a></li>
623624
<li><a href="/ej2-asp-core/chips/accessibility">Accessibility</a></li>

‎ej2-asp-mvc-toc.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -575,6 +575,7 @@
575575
<ul>
576576
<li><a href="/ej2-asp-mvc/chips/getting-started">Getting Started</a></li>
577577
<li><a href="/ej2-asp-mvc/chips/types">Types</a></li>
578+
<li><a href="/ej2-asp-core/chips/draganddrop">Drag and Drop</a></li>
578579
<li><a href="/ej2-asp-mvc/chips/customization">Chip Customization</a></li>
579580
<li><a href="/ej2-asp-mvc/chips/style">CSS Structure</a></li>
580581
<li><a href="/ej2-asp-mvc/chips/accessibility">Accessibility</a></li>

0 commit comments

Comments
 (0)