CODEWITHSUNDEEP
jquerytwitter-bootstrapjquery-uijhtmlarea
user1618825
user1618825

Reputation:

jHTMLArea Drag and Drop not working

I had used the jquery-ui drag and drop functionality with jHtmlArea. Page is not running out of errors after all integration, but still the drag and drop functionality is not working.

Here is the fiddle.

Any Ideas would help?

Upvotes: 0

Views: 107

Answers (1)

Dekel
Dekel

Reputation: 62556

The elements you are trying to drag really are drag-able, however you defined the containment as parent, so you will be able to grad them only inside their parent.
You can either remove the containment or set it to body if you want to be able to grad the items outside their parent div.

Your other problem that you have is (I guess) that you want to be able to drag the images and drop them inside the jHtmlArea, and for that you will need to write a specific function to handle the drop (line 35 in your original code):

drop: function (event, ui) {
    // Here you need to handle the drop.
}

You can use the pasteHTML function of jHtmlArea to do that.
For some reason the jHtmlArea had some problems when trying to insert the img element that was dragged, but here is something you can start with:

drop: function (event, ui) {
    $('.rich-textarea').htmlarea('pasteHTML', 'Here goes the HTML that you want to paste');
}

I think jHtmlArae has some specific problems with inserting images because the error I got when tried to insert image tag was not related to the drag&drop code. You might want to consider moving to some better editor (like ckeditor, for example).

Upvotes: 0

Related Questions