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
}
});
Related
I'm using jquery UI draggable. I do some works in drag function. for example I scale the dragging element according to it's position. I want to drag elements automatically to certain (x, y) (something like jquery animate({left:x, top:y}, 1000)); but I want to trigger drag function and scale element when is animating. how can I do this?
I suggest another approach to do that.
Use an external function to do the scale effect, and call it from both events (drag and animate):
var $myDraggable = $('#draggable').draggable({
drag: function( event, ui ) {
scale(ui.offset.left, ui.offset.top);
}
});
$('button').on('click', function(){
$myDraggable.animate(
{ left:100, top:100 },
{
duration: 1000,
progress: function(draggable){
scale(draggable.elem.offsetLeft, draggable.elem.offsetTop);
}
});
});
function scale(left, top){
//your scaling logic here
console.log("scaling", left, top);
}
See this example: FIDDLE
https://jsfiddle.net/moongod101/8gdvz9jL/
PS:This code offer a button toggle function
$(function(){
$button = $('button')
$box = $('.box')
$click = 0
$button.click(function(){
if($click !=0){
$click ++
$box.removeClass('active')
}else{
$click --
$box.addClass('active')
}
});
});
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 ['}
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
Hi all sorry if its a silly question.But I am new to javascript.
I have a div on which is draggable.Now I want to do some thing when that div is dropped
So far I have write a simple alert but its not working.
Can any one guide me how do I write some code in drop event.
Here is my code
<div id = "par" class = "ui-draggable" style="position: relative; height: 200px; width: 200px;outline:2px solid green">
</div>
<script>
$('#par').draggable();
$('#par').droppable({
drop: function( event, ui ) {
alert("blabla");
}
});
</script>
Here is link to fiddle
Draggable droppable
Like MrObrian says, you need to be using draggable.stop for what you are tying to achieve.
This fiddle illustrates the difference.
http://jsfiddle.net/MddyD/4/
$(function() {
$('#par').draggable({
stop: function() {
alert("hi");
}
});
$("#dropIn").droppable({
drop: function() {
alert("drop");
}
});
Use Droppable.drop to catch what was dropped on droppable(You need to use both draggable and droppable)
http://docs.jquery.com/UI/Droppable#event-drop
<script>
$('#thingToDrag").draggable();
$('#par').droppable({
accept: "#thingToDrag",
drop: function( event, ui ) {
alert("draggable dropped");
}
});
</script>
You need to use the dragstop event which will be launched when the draggable element will stop being dragged :
$('#par')
.draggable()
.on('dragstop', function(event, ui) {
alert('ok')
});
http://jsfiddle.net/MddyD/3/
Here, you need to work with the object you setup as draggable. You can bind a function to the stop event.
<script>
$(function() {
$('#par').draggable({
stop: function(event, ui) {
alert("Dropped");
}
});
});
</script>
the $(function(){ }); just tells the script to run when the document is done loading. You could also just bind any other function that you create to the stop event.
http://jqueryui.com/demos/draggable/#event-stop
Hi, I want to get Drop target className/ID after Drop Event. Does anybody tell me how to get ?
<div class="drop_1" id="drop1"></div>
<div class="drop_2" id="drop2"></div>
<div class="drop_3" id="drop3"></div>
all DIV component must be drag-able & drop-able onto each other
use the this.id inside the drop handler
jsFiddle demo
$( ".selector" ).droppable({
drop: function(event, ui) {
console.log(this.id);
}
});
Example
$(function() {
***/* Make draggable */***
$(".drop_1, .drop_2, .drop_3").draggable();
var dropOpts = {
accept:".drop_1, .drop_2, .drop_3",
drop:dropCallback,
greedy:true
};
/* Droppable */
$(".drop_1, .drop_2, .drop_3").droppable(dropOpts);
/*get your Drop target*/
function dropCallback(e) {
alert("The firing droppable was " + e.target.className);
}
});