How to add a class to a div created inside a contenteditable element?

Question

Here is the example code:

<div>
  Text..
  <div id="editable-editor" contenteditable="true">Some Text Here...</div>
</div>

If press enter inside the #editable-editor after Some Text it will create a <div>Here...</div> element for the text Here.

How do I add the jquery-ui draggable class to the <div>Here...</div> element to make it dragabble?

score 0 · Accepted Answer · edited May 23 '17 at 12:16

0

You'll want to reference this SO answer. Essentially, there is no cross-browser guaranteed way to know when someone has added new content to your contenteditable element. You can guess, however.

$("#editable-editor").keydown(function () {
   $(this).children('div').each(function () {
        $(this).draggable();
   });
});

Simply listen for key events and add draggable to your new divs.

edited May 23 '17 at 12:16

Community

1
1

answered Nov 09 '15 at 17:32

Jack Guy

8,346
8
55
86

Thank you for answering. But this is dragging all the
elements if i drag the first
element.. I should be able to drag the individual
.
– Ketha Kavya Nov 09 '15 at 18:08
Hey @Ketha Kavya I've changed my answer. See if that works better for you. – Jack Guy Nov 09 '15 at 18:16
No this didn't work its not dragging any
element.
– Ketha Kavya Nov 10 '15 at 05:41

score 0 · Answer 2 · answered Nov 09 '15 at 17:41

0

please try this

$('div', '#editable-editor').each(function (i) {

$(this).addClass('ui-widget-content'); $(this).draggable();

});

answered Nov 09 '15 at 17:41

Selva Kumar J

9
2

Hi please check this [fiddle-dragAround](http://jsfiddle.net/jskBJ/1h89jmLr/1/) @KethaKavya – Selva Kumar J Nov 09 '15 at 18:23
I have asked it for a
with contenteditable=true which creates a children div dynamicallly not just for a
element with children.
– Ketha Kavya Nov 10 '15 at 05:48

guest271314 · Answer 3 · 2015-11-09T17:53:57.457

0

Try using keypress , change events , .has() , .not()

$("#editable-editor")
  .on({
    "keypress": function(e) {
      if (e.keyCode === 13) {
        $(this).append("<div>Here...</div>")
        .change()
      }
    },
    "change": function() {
      if ($(this).has("div")) {
        $("div", this).not(".ui-draggable").draggable()
      }
    }
  })

.draggable {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div>
  Text..
  <div id="editable-editor" contenteditable="true">Some Text
  </div>
</div>

edited Nov 09 '15 at 17:53

answered Nov 09 '15 at 17:46

guest271314

1
15
104
177

@KethaKavya _"This isn't working."_ Can describe details ? – guest271314 Nov 10 '15 at 05:52
Its appending an additional
Here
and its dragging that additionally added div but not the div that is created from the contenteditable div. – Ketha Kavya Nov 10 '15 at 06:04
Is requirement to 1) only create sinle `div` containing text "here" at keypress of enter key ? 2) add `draggable` attribute to `Text` ? 3) add `draggable` attribute to `contentEditable` element ? – guest271314 Nov 10 '15 at 06:10
for a `div` with ` contenteditable` it will create a div automatically when an enter key is pressed. So for the div that is created when the enterkey is pressed i want to make that each individual `div` to be draggable. – Ketha Kavya Nov 10 '15 at 06:27
@KethaKavya _"for a div with ` contenteditable` it will create a div automatically when an enter key is pressed. So for the div that is created when the enterkey is pressed i want to make that each individual div to be draggable. "_ Yes . Tried stacksnippets ? If press "Enter" , `div` should be appended having text "Here..." which should be draggable – guest271314 Nov 10 '15 at 06:36

How to add a class to a div created inside a contenteditable element?

3 Answers3