We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Is there any functionality to drag & drop "chips" in a text area

Thread ID:

Created:

Updated:

Platform:

Replies:

147442 Sep 11,2019 02:35 AM UTC Sep 13,2019 03:59 AM UTC Angular - EJ 2 5
loading
Tags: RichTextEditor
Drio
Asked On September 11, 2019 02:35 AM UTC

I'm looking for something like this, but for Angular

https://www.syncfusion.com/kb/10292/how-to-add-drag-and-drop-text-option-in-document-editor-for-asp-net-mvc

I want to enable a TextEditor, with the option to accept drag & drop variables in the text. This will be to create a layout, I want to see the variables like a chips (angular control) inside the text

Something like the attached image

Thank you

Attachment: Screen_Shot_20190910_at_9.31.18_PM.png_1ef4377a.zip

Narayanasamy Panneer Selvam [Syncfusion]
Replied On September 11, 2019 07:45 PM UTC

Hi Drio, 
 
Greetings from Syncfusion support. 
 
We have validated your requirement and have prepared sample as you have expected. In this sample we have provided drag and drop support for selected text / Element which can drop into textarea of RTE as chips. Also, We have bound drop event to the editor.  
 
 
Please let us know if you need any further assistance on this. 
  
Regards,  
Narayanasamy P.  


Drio
Replied On September 11, 2019 08:09 PM UTC

Thank you Narayanasamy,

But I can't drag any Item from Car list ...

Narayanasamy Panneer Selvam [Syncfusion]
Replied On September 12, 2019 12:21 PM UTC

Hi Drio,  
 
Thanks for your update. 
 
In the previously shared sample, the dragable support for the listview item is not enabled. So, it works after you have selected the required text and then drag and drop it. 
  
Now in the modified sample, we have enabled the draggable support for listview item by passing draggable: true in htmlAttibutes through dataSource. Now It works as expected. Please find the code changes in below,  
  
Code example: 
public data: Object[] = [ 
    { 
      "text": "Hennessey Venom", 
      "id": "list-01", 
      "htmlAttributes": { draggable: true } 
    } 
] 
 
 
For your convenience we have prepared a sample based on above code snippet, 

 
  
Please let us know if we have misunderstood anything as incorrect. 
 
Regards,  
Narayanasamy P.  


Drio
Replied On September 12, 2019 02:44 PM UTC

Great!!

That's what I'm looking for ...

Thank you so much!

Narayanasamy Panneer Selvam [Syncfusion]
Replied On September 13, 2019 03:59 AM UTC

Hi Drio,


You are welcome.


We are glad to hear that the reported issue has resolved at your end. 
😊

Regards,
Narayanasamy P.
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon