We Keep Coding

CKEditor 4 Widget with Draggable contents

I'm trying to make a CKEditor widget with children that listen to the dragstart drag and dragend events. The issue is that these events never get fired - it's like the .cke_widget_wrapper (the div that wraps widgets) cancels those events.
Note that I'm not trying to make the entire widget draggable (part of the widget functionality), but make elements within the widget draggable.
If I unwrap the children of .cke_widget_wrapper (thereby removing the wrapper) then everything works as expected. But it seems this wrapper stops children from dragging.
I won't post the code on how I'm doing the dragging because it works as expected in an isolated test case, and as explained, works when I unwrap the widget from .cke_widget_wrapper.
Here's how I'm creating the widget:
CKEDITOR.plugins.add('embed', {
init: function(editor) {
editor.widgets.add('gallery', {
init: function() {
// code here that generates the HTML
},
upcast: function(element) {
// Defines which elements will become widgets.
if (element.hasClass('gallery')) {
return true;
}
},
downcast: function(element) {
element.setHtml("");
},
draggable: false, // This does not make a difference, but I set it to false because I don't want to use the built in widget dragging functionality
template: "<div class="gallery" trix-id='{id}'></div>",
defaults: function() {
return {id: 1} // As an example
}
});
}
});
Here's the generated HTML:
<div tabindex="-1" contenteditable="false" data-cke-widget-wrapper="1" data-cke-filter="off" class="cke_widget_wrapper cke_widget_block cke_widget_selected" data-cke-display-name="gallery" data-cke-widget-id="0">
<div class="gallery cke_widget_element" trix-id="1" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="gallery">
<!-- Other HTML -->
<div class="resize" draggable="true" trix-gallery-resize="1"></div>
</div>
</div>
The div.resize element has event handlers attached to it to allow dragging. As mentioned, this works in an isolated test case, and when I remove the .cke_widget_wrapper wrapper.
Does anyone know how I can allow dragging within the widget, so that the event handlers behave normally on the .resize element?
Thanks

As usual, as soon as I post a question to SO I work out the answer.
CKEditor attaches a mousedown event to the editable area which does many things, but it seems one of the side effects is it stops widget contents from being draggable.
All I had to do was attach an mousedown event handler to the .resize element which calls event.stopPropagation, like so:
element.on('mousedown', function(e) {
e.stopPropagation();
});
Easy!

jQuery clone not working with draggable

I am using jQuery's draggable and droppable in order to drop content elements onto a page element:
<h2>Page</h2>
<div id='page-content'>
</div>
<div id='content-elements'>
<div id='text-element' class='content-element'>Text</div>
<div id='date-element' class='content-element'>Date</div>
</div>​
My JS for the draggable looks like this:
$elements.draggable({
revert: true
});
The reason I have that revert in there is that I want the content element to return to the list of elements and a 'duplicate' to be added to the page.
I tried doing this using this js for the droppable (created using coffeescript):
$('#page-content').droppable({
drop: function(event, ui) {
var $element, $me;
$me = $(this);
$element = $(ui.draggable);
console.log($element.clone(false));
return $element.clone().appendTo($me);
}
});
What this does is get the ui element that was dragged, attempt to clone it and then append it to the page.
This however does not work! Even though I CAN get the div, etc from the ui.draggable.
I created a jsfiddle to illustrate the problem:
http://jsfiddle.net/sw4Gc/2/
Why oh why?

The element was cloned in a state where it is in position relative and is outside the element. you have to remove the element styles:
var $newElement = $element.clone();
$newElement.attr('style', '');
$newElement.appendTo($me);

Jquery appending in front of div

So I'm using Jquery Drag/Drop to drag and drop something onto a dashboard. I want to now drag anything that I have dropped onto the dashboard out of the dashboard in order to destroy it/remove it from the dashboard.
I've tried adding a class to the thing that is dropped onto the dashboard and then tried adding a draggable to that, but the drag is not working, I think because when I append the element to the dashboard it appears behind the dashboard(the colours are a little faded).
Here is my code-
$(".draggable").draggable({helper:'clone'});
$("#favouritesDashboard").droppable({
accept:".draggable",
drop: function(event,ui) {
var toDrop = $(ui.draggable).clone();
//create smaller version
$(toDrop).addClass("inDashBoard");
$(this).append(toDrop);
}
});
$(".inDashBoard").click(function(){
console.log("clicking elem in dashboard");
});
I've replaced the second draggable with a click, the console.log never prints, suggesting that what I think is going on is actually going on.

Use on for late binding http://api.jquery.com/on/ .
$(document).on('click', '.inDashBoard', function(){
console.log("clicking elem in dashboard");
});

This is due to the nature of event binding / listeners in jQuery.
The elements you want to trigger a click event on do not exist when the page is loaded, they are added dynamically. So to ensure that your method is attached to new elements that match the selector you should use "on" or "live"
$(".inDashBoard").on( "click", function(){
console.log("clicking elem in dashboard");
});

this should work:
$(".inDashBoard").live('click', function(){
console.log("clicking elem in dashboard");
});

How do you drag a link without its parent div attached?

I have an image that is linked that is contained by a div. I want to be able to drag the linked image to a tinyMCE control without its surrounding DIV.
HTML:
<div id="image_preview"><img src="someimage" /></div>
For whatever reason it's dragging the DIV along with the IMG and A. Is there a way to get it to not drag the DIV. I've tried preventing default ondrag, onmousedown etc. on the DIV, but then nothing drags.
I've tried:
$(document).ready(function(){
$('#image_preview').on('mousedown', function(){
return false;
});
});
and:
$(document).ready(function(){
$('#image_preview').on('dragstart', function(e){
e.preventDefault();
});
});
and a couple of other things, but of course I knew none of those would do anything other than prevent dragging of anything within the DIV.

HTML:
<div id="image_preview"><img src="someimage" /></div>
<div id="anotherdiv"></div>
jQuery:
$(function() {
$( "img" ).draggable({
stop: function(event, ui) {
$(this).appendTo('#anotherdiv');
}
});
});

Change your markup to this:
<div draggable="false"><img src="someimage" draggable="true" /></div>
You should be able to prevent IE's default dragging bahavior by using something like this:
document.ondragstart = function () {
return false;
};

I had this problem when making a drag & drop image pane to use alongside TinyMCE. This solution worked for me using Firefox's native drag & drop: Instead of wrapping the img tag with a td, tr, etc. as mentioned above, I placed a tiny comment before the image: . This was enough for it to exclude the parent element in the drag & drop, which was a DIV. I hope this helps someone!

Javascript ondrag, ondragstart, ondragend

I've been trying to use ondrag() and some other functions on a div rendered dynamically on an HTML page.
None of these events seem to fire, nor do I get any errors. I can't find much helpful documentation on it either. Am I interpreting it wrongly, can you use these events to script functionality to drag a div around the screen?

Have a look at this documentation: https://developer.mozilla.org/En/DragDrop/Drag_and_Drop
Note: It does not work in every browser.
If you want a cross-browser support use jQuery: http://jqueryui.com/demos/draggable/
jQuery example:
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
<script>
$(function() {
$( "#draggable" ).draggable({
drag: function(event, ui) {}
});
});
</script>
Another example:
<div id="toBeDragged" draggable="true">
This text <strong>may</strong> be dragged.
</div>
<script>
document.getElementById('toBeDragged').addEventListener('dragstart', function(event) {
event.dataTransfer.setData('text/plain', 'This text may be dragged');
});
</script>

I haven't used drag myself much but I believe it's the drag "edit action" - eg selecting text and dragging it within a textbox/textarea.
You may need to implement your own onmousedown() onmouseup() and onmousemove() handlers for the functionality I think you're after

Short answer: <div>-s are not draggable by default, unlike <a>-s. You must add draggable=true:
<div draggable=true ondragstart=...>HTML</div>
Works on Firefox 75 like that.

Is there content in the div? I don't think it's the element itself that gets dragged in this particular event.

An easy way to do this is with jQuery UI, make sure you use it after your dynamic div has been rendered.
$(document).ready(function () {
$('.my_draggable_elements').draggable({
drag: function(){
// do something
}
});
});