JQuery | Draggable conflict with Contenteditable

Author - Harpal Singh
11.12.2017
|
0 Comments
|

JQuery Draggable function conflict with Contenteditable Dom attribute

I am creating HTML editor in which I have the requirement to add an editable and draggable div. I have applied both the properties to the div: draggable and Contenteditable, but only draggable us working for me when applied together.

1. Here is the div which is only editable:

<div contenteditable=”true”>I am editable</div>

2.Below div is only draggable:

<script>
$(“#draggable”).draggable();
</script>
<div id=”draggable”>I am draggable</div>

3.When I applied both properties together then the div is only draggable but not editable:

<script>
$(“#draggable”).draggable();
</script>
<div id=”draggablecontenteditable=”true”>I am draggable but not editable</div>

Solution:

1.To make the div draggable and editable, put the div inside another div which will have one more div which will work as handle for the div and will do the trick for you:

<div id=”container”>
<div id=”handle”>+</div>
<div id=”editable” contenteditable=”true”>I am editable and draggable</div>
</div>

2. Add Below script:

<script>
$(document).ready(function(){
$(“#container”).draggable({handle:”#handle”});
});
</script>

3. Now just open the HTML in your favorite browser and it will work for you. Div is editable and you can drag the div with the help of handle on the div:

1

Webner Solutions is a Software Development company focused on developing Insurance Agency Management Systems, Learning Management Systems and Salesforce apps. Contact us at dev@webners.com for your Insurance, eLearning and Salesforce applications.

Leave a Reply

Your email address will not be published. Required fields are marked *

Send your message