asked on

jQuery: How to drop draggable text into a paragraph?

I have made my <blockquotes> draggable and I would like to drop them elsewhere in the text - usually inside a <p>.

How do I tell jQuery to insert the <blockquote> inside a DOM; that is: create/insert a new node where the blockquote was dropped?

I currently have the following code:

                        $(".draggable").draggable({
                            helper: "move",
                            axis: "y"
                        });
                       
                        $('.droppable').sortable({
                            accept: '.draggable',
                            drop: function (e, ui) {
                                $(this)
                                $(ui.draggable).appendTo($(this));
                            }
                        });

Open in new window

I am using this jQuery inside CKEDITOR. If I use appendTo() it creates/adds a new element to the editor's textbox.

Surely, there must a way to do this? I have seen many examples where the objects are moved around the screen / pictures - but hardly any with text.

Can anyone please assist with this?

lenamtl

Hi,

you can use the clipboard plugin https://ckeditor.com/cke4/addon/clipboard

here is a working example
https://ckeditor.com/docs/ckeditor4/latest/examples/draganddrop.html

Julian Hansen

What are you using to handle the drag / drop (jQueryUI?)?
What is line 9 meant to be doing?

If you are using jQueryUI you need to setup your draggable helper to clone the object.

You then need to provide a function to append the item to the container it was dropped on.

If you are using jQueryUI this sample gives some more information
https://jqueryui.com/droppable/#photo-manager

If not post back with more information.

Massimo Scola

ASKER

The example seems to work with images. I had to create a custom CSS for the blockquotes and I would like to be able to grab the blockquote not only by the text, but also by the quote image which I have added to the css - this only seems to work with jQuery.

With jQuery I can drag the blockquotes beautifully, but I cannot just drop in the text.

You then need to provide a function to append the item to the container it was dropped on.

I have already set the draggable helper and the photo manager example is not helpful as I am dropping text inside a <p>.

Don't I need to find out where I am dropping the object and then break up the text inside the <p>?

. $('.droppable').droppable({
                            accept: '.draggable',
                            drop: function (e, ui) {
                                $(this)
                                //$(ui.draggable).appendTo($(this));
                                console.log(ui.helper.position())
                                var range;

                                // Try the standards-based way first
                                if (document.caretPositionFromPoint) {
                                    var pos = document.caretPositionFromPoint(dropXPosition, dropYPosition);
                                    range = document.createRange();
                                    range.setStart(pos.offsetNode, pos.offset);
                                    range.collapse();
                                    //range.insertNode(img);
                                }
                                // Next, the WebKit way
                                else if (document.caretRangeFromPoint) {
                                    range = document.caretRangeFromPoint(dropXPosition, dropYPosition);
                                    newNode = document.createElement("p");
                                    newNode.appendChild(  document.createTextNode("<blockquote>HELLO WORLD</blockquote"));
                                    range.selectNode(document.getElementsByTagName("blockquote").item(0));
                                    range.insertNode(newNode);
                                  
                                }
                            }
                        });

Open in new window

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Massimo Scola

ASKER

Thanks a lot about letting me know that text cannot be placed - that it has to be put in a container. Then it works.

Julian Hansen

You are welcome.