I have a div which has contenteditable="true" and which contains some html. This html may include images.
Since contenteditable="true" the user can move images by dragging them to a new position. But I need my code to be notified each time a image is moved, in a way where I get both the image element which is being moved, and the target node where the image is dropped. How do I do that?
My current solution adds a Drop listener to my div element which is contenteditable, and then I do get a drop event each time the user moves an image, but I can't get the dom node with the image which the user moved.
Also: Dragging an image, seems to copy the DOM node, instead of moving it. Is this true? (Tested in firefox).
I would suggest a following pure JavaScript solution
HTML:
<div id="space" contenteditable="true">
Hello <img width="300" class="contentImg" src='http://www.independent.co.uk/incoming/article9859555.ece/alternates/w620/Dr-Talyor.jpg'/> dude!
</div>
CSS:
#space {
width: 500px;
height: 500px;
background-color: #000000;
color: #ffffff;
}
JavaScript:
var draggedImg;
document.addEventListener("dragstart", function( event ) {
// IE uses srcElement, others use target
var targ = event.target ? event.target : event.srcElement;
if (targ.className == 'contentImg'){
draggedImg = event.target;
}
}, false);
document.addEventListener("dragend", function( event ) {
if(draggedImg){
alert("It's moved!");
console.log('Here is data', draggedImg);
draggedImg = null;
}
}, false);
You'll find an image node in draggedImg variable.
Please review a working example here: http://jsfiddle.net/o09hLtch/2/
jQueryUI features draggable and droppable interactions. Draggable has drag event, which gives you the dragged element and droppable has drop event, which gives you the dropped element as well as where it was dropped.
Quick example: clickety
$('#content .dr').draggable(
{
addClasses: false,
drag: function(event, ui)
{
$('#notify').text('Bird (#' + $(this).attr('id') + ') being dragged: ' + JSON.stringify(ui));
},
stop: function(event, ui)
{
$('#notify').text('');
}
});
I think You looking for this,
$(function () {
$(".image").draggable({helper: 'original'});
$(".container").droppable({
drop: function (event, ui) {
$(this).append(ui.draggable.css({position: 'static'}));
alert('dropped!');
}
});
});
For JSFiddle Demo Let's see
Good Luck ['}
Related
I googled and found several answers but they was all about click or mousemove events which are not suitable for my question.
Basically I allow users to drag an item from a list and drop it on a folder in another list and I want to highlight element (in the folder list) whenever an item is dragging over it. Listening to mouseenter and mouseleave events on the folder list won't work. I tried with document.elementFromPoint in the dragging event (jQuery UI's Draggable drag) but unfortunately it returns the helper element instead of the element in the folder list. I think it's correct behavior since document.elementFromPoint returns the top most element under mouse cursor. But it doesn't solve my problem :(.
$("#filelist li").draggable({
helper: "clone",
drag: function (event, ui) {
console.log(event.pageX, event.pageY);
var element = document.elementFromPoint(event.pageX, event.pageY);
// element is helper element, instead of actual element under cursor which I want.
}
});
$("#folderlist").droppable({
drop: function (event, ui) {
}
});
// These mouse events won't be triggered while dragging an item.
$("#folderlist").on({
"mouseenter": function (event) {
this.style.backgroundColor = "#1c70cf";
},
"mouseleave": function (event) {
this.style.backgroundColor = "";
}
}, "li");
Apparently, the droppable has an hover function. http://jqueryui.com/droppable/#visual-feedback
$("#folderlist").droppable({
hoverClass: "ui-state-hover",
drop: function (event, ui) {
}
});
Then add this to your css :
.ui-state-hover
{
background-color: #1c70cf;
}
I am trying to implement a banner management system and was planning on using the jquery Photo Manager. The problem I am currently facing is that I cannot seem to get the parent image to clone on the primary container.
Here is the link to the fiddle for the codes (It is basically the same from the jQuery UI site)
What I am intending to create is to allow users to drag or add the image from the left to right and users can add the same image multiple times but as soon as the image is added to the right it disappears from the left.
I was looking at this piece of code for solution but do not see any removal of DOM elements specific to the item getting moved. only items removed from the DOM are the icons.
function deleteImage($item) {
$item.fadeOut(function () {
var $list = $("ul", $trash).length ? $("ul", $trash) : $("<ul class='gallery ui-helper-reset'/>").appendTo($trash);
$item.find("a.ui-icon-trash").remove();
$item.append(recycle_icon).appendTo($list).fadeIn(function () {
$item.animate({
width: "48px"
})
.find("img")
.animate({
height: "36px"
});
});
});
}
can someone help me out with an explanation.
Thanks in advance.
Actually using the jquery .clone() function did the trick. All I had to do was instead of passing the object of the element, I passed their clones with the events.
$trash.droppable({
accept: "#gallery > li",
activeClass: "ui-state-highlight",
drop: function (event, ui) {
deleteImage(ui.draggable.clone(true));
}
});
setting the parameter to true for the clone, makes a deep copy of the element including all the events.
$("ul.gallery > li").click(function (event) {
var $item = $(this),
$target = $(event.target);
if ($target.is("a.ui-icon-trash")) {
deleteImage($item.clone(true));
} else if ($target.is("a.ui-icon-zoomin")) {
viewLargerImage($target);
} else if ($target.is("a.ui-icon-refresh")) {
$item.remove();
}
return false;
});
Here is the link to the working fiddle for reference. Link
I have a element (#dot) which can be dragged. The dragged element (#dot) is just allowed to be in multiple (.way)s but when (#dot) leaves this element then a function should start (for now a alert is enough). I have search on stackoverflow and on other pages but I dont find out somethings like this.
Fiddle
Here is my JS:
$(document).ready(function (){
$('#dot').draggable({
containment: "#world",
});
});
Html:
<div id="world">
<div id="dot"></div>
<div class="way">
</div>
</div>
For now an alert is enough...
My question is, how can i check if the element touches on other element?
Updated answer:
Demo: http://jsbin.com/yorohimi/4
Seems like you can use jQuery draggable and droppable for this:
JS:
$(document).ready(function () {
$('#dot').draggable();
$('.way').droppable({
accept:'#dot',
tolerance:'fit',
over:function(event,ui){
$('p').text('moved inside way');
$('#world').removeClass('green');
},
out:function(event,ui){
$('p').text('moved outside way');
$('#world').addClass('green');
}
});
});
The key is to use tolerance:fit here in droppable. Whenever #dot touches #world the color of #world is changed for visual feedback.
Following method will work only for single .way.
You can compare the position using getBoundingClientRect method and execute your code.
Fiddle: http://jsfiddle.net/9SJam/4/
JS:
$(document).ready(function () {
$('#dot').draggable({
axis: "y",
containment: "#world",
drag: function (event, ui) {
drag_handler($(ui.helper));
}
});
});
function drag_handler(elem) {
var p = elem[0].getBoundingClientRect();
var P = $('.way')[0].getBoundingClientRect();
if ((P.top > p.top) || (P.bottom < p.bottom)) {
console.log('touched');
$('#world').addClass('color');//For visual feedback
} else {
$('#world').removeClass('color'); //For visual feedback
}
}
You need to declare #world as droppable, then you can use it's over event to trigger your function, which is triggered when an accepted draggable is dragged over the droppable.
something like
$( "#world" ).droppable({
over: function() {
// Your logic
}
});
I have a list of draggable objects and a droppable target. The view housing the droppable target gets created and rendered when dragging starts. I've attached some images highlighting the desired action to the bottom of the post.
The issue is that jQuery UI appears to have a bug. This post: Droppable items not displaying hoverClass if they are shown during drag operation seems to corroborate that belief.
I have this code which enables draggable-ness:
this.$el.find('.videoSearchResultItem ').draggable({
helper: function() {
var helper = $('<span>', {
text: VideoSearchResultItems.selected().length
});
return helper;
},
appendTo: 'body',
containment: 'DOM',
zIndex: 1500,
cursorAt: {
right: 20,
bottom: 30
},
start: function (event, ui) {
var draggedVideoId = $(this).data('videoid');
var draggedVideo = VideoSearchResultItems.get(draggedVideoId);
draggedVideo.set('selected', true);
$(ui.helper).addClass("ui-draggable-helper");
}
});
My program has an event listener for a video search result becoming selected. When one becomes selected, the 'AddItems' view renders itself and transitions in.
this.listenTo(VideoSearchResultItems, 'change:selected', function (changedItem, selected) {
if (selected && this.addItemsView === null) {
this.addItemsView = new AddItemsView();
this.$el.append(this.addItemsView.render().el);
this.addItemsView.show();
}
});
AddItemsView initializes droppable during render:
this.$el.find('i.droppable').droppable({
hoverClass: 'icon-drop-hover',
tolerance: 'pointer'
});
Unfortunately, if my draggable is already dragging when the view is rendered -- hoverClass fails as well as the 'over' event.'
I'm wondering if there's any workaround for this? I don't see one.
The solution to this was to set the draggable element's "refreshPositions" option to true. This causes it to inform the droppable even if the droppable is created late.
I have tried to drag the dropped element which is a clone of the dragged element, but when I drag the element it create a another element in the page. Here is my code..
jQuery(function() {
jQuery(".component").draggable({
// use a helper-clone that is append to 'body' so is not 'contained' by a pane
helper: function () {
return jQuery(this).clone().appendTo('body').css({'zIndex':5});
},
cursor: 'move'
});
jQuery('.ui-layout-center').droppable({
activeClass: 'ui-state-hover',
accept: '.component',
drop: function(event, ui) {
jQuery(this).append(jQuery(ui.draggable).clone().draggable());
}
});
});
Is there any missing command which makes every drag make a new clone?
You should had a class in order to indicate that element has been dropped and that you can move it but you should not clone it.
You can have a look at this fiddle : http://jsfiddle.net/scaillerie/njYqA/ .
In the handler for drop, I have just replace by this code :
if (!ui.draggable.hasClass("dropped"))
jQuery(this).append(jQuery(ui.draggable).clone().addClass("dropped").draggable());
jQuery(this).append(jQuery(ui.draggable).clone().draggable()); Did you forget .clone()