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);
}
});
Related
I'm trying to drag "templates" (initially as clones) from a "store" into droppable slots. Thereafter I want to be able to drop the dragged item into whatever slot I wish. Draggables are set as follows:
$( ".template" ).draggable({
helper: "clone",
}
);
$( ".item" ).draggable();
I got round the issue of the thing re-cloning by replacing the "template" class with an "item" class on first drop and within the drop function switching from a clone to a straight element as follows:
$( ".template-slot" ).droppable({
accept: ".template, .item",
drop: function( event, ui ) {
if(ui.draggable.hasClass("template")) {
$(this).append(ui.draggable.clone())
// add item class
$(".template-slot .template").addClass("item");
// remove template class
$(".item").removeClass("ui-draggable template");
// expand to fit the slot
$(".item").addClass("expand-to-slot");
// make it draggable again
$(".item").draggable();
}
if(ui.draggable.hasClass("item")) {
$(this).append(ui.draggable);
}
}
});
The first drag and drop works okay. the problem arises on the second drag and drop. The element drags okay but when dropped it gets placed twice as far in whatever direction I drag it. So, for example, if I've dragged it 50px to the right, it drops 100px to the right. the same with up and down etc.
I suspect it's something to do with the offset being cumulative but haven't worked out why it's doing this or how to fix it.
I've created a fiddle here: https://jsfiddle.net/stefem1969/a86jmnxu/10/ to show the problem.
Hope someone can help.
Working Example: https://jsfiddle.net/Twisty/fu83zq2y/11/
JavaScript
$(function() {
function makeDrag(obj, opt) {
if (obj.hasClass("ui-draggable")) {
obj.removeClass("ui-draggable");
obj.attr("style", "");
}
if (opt === undefined) {
opt = {};
}
obj.draggable(opt);
}
makeDrag($(".template, .item"), {
helper: "clone",
});
$(".template-slot").droppable({
accept: ".template, .item",
drop: function(event, ui) {
if (ui.draggable.hasClass("template")) {
console.log("it has the template class!");
var newItem = ui.draggable.clone();
newItem.toggleClass("template item");
newItem.addClass("expand-to-slot");
newItem.appendTo($(this));
makeDrag(newItem);
}
if (ui.draggable.hasClass("item")) {
console.log("it has the item class!")
var droppableOffset = $(this).offset();
console.log("droppableOffset: ", droppableOffset);
ui.draggable.attr("style", "").appendTo($(this));
}
}
});
$(".template-store, .thagomizer").droppable({
accept: ".item",
drop: function(event, ui) {
ui.draggable.remove();
}
});
});
Part of draggable is to set a top and left when moving it around. Even if you append the item to another element, it will still have those. Clearing that can help accomplish what you're looking for.
The makeDrag() is just helpful to perform the same operations a lot.
Hope this helps.
I want to dynamically create a draggable div on mousedown, which within the same mousedown event can then be dragged into a droppable area and dropped.
The point that I have got to so far is that a new draggable div is created on mousedown and that div then follows the cursor. But it cannot be dropped into the droppable area.
JS Fiddle here - http://jsfiddle.net/rqyv6bpg/
The jQuery code:
jQuery(document).ready(function ($) {
//on mousedown, creates a new draggable div in the cursor position
$(".search-result-container").mousedown(function(e){
var x = e.pageX + 'px';
var y = e.pageY + 'px';
$('<div/>', {
"class": "test",
text: "Draggable track that can be dropped into droppable queue!",
}).css({
"position": "absolute",
"left": x,
"top": y,
"z-index": 1000
}).draggable()
.appendTo($(document.body))
});
//in order to get the newly created div to instantly follow the cursor
$(document).on('mousemove', function(e){
$('.test').css({
left: e.pageX,
top: e.pageY
});
});
$( "#queue-bar" ).droppable();
});
Help would be greatly appreciated! Thanks in advance.
If I understood correctly, you are looking for the helper option of draggable widget.
$(document).ready(function($) {
$(".search-result-container").draggable({
helper: "clone", // use a clone for the visual effect
revert: false
});
$("#queue-bar").droppable({
accept: "article",
drop: function(event, ui) {
ui.draggable.clone().appendTo(this); // actually append a clone to the droppable
}
});
});
$(document).ready(function($) {
$(".search-result-container").draggable({
helper: "clone", // use a clone for the visual effect
revert: false
});
$("#queue-bar").droppable({
accept: "article",
drop: function(event, ui) {
ui.draggable.clone().appendTo(this); // actually append a clone to the droppable
}
});
});
.search-result-container {
background-color: red
}
#queue-bar {
background-color: blue
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<article class="search-result-container">This is a track with lots of information</article>
<div id="queue-bar">This is the droppable area</div>
You can also create a custom helper by returning an element to be used as helper as shown below:
$(document).ready(function($) {
$(".search-result-container").draggable({
helper: function(){
// return a custom element to be used for dragging
return $("<div/>",{
text: $(this).text(),
class:"copy"
})
}, // use a clone for the visual effect
revert: false
});
$("#queue-bar").droppable({
accept: "article",
drop: function(event, ui) {
//you might want to reset the css using attr("style","")
ui.helper.clone().appendTo(this); // actually append a clone of helper to the droppable
}
});
});
.search-result-container {
background-color: red;
}
#queue-bar {
background-color: blue;
}
.copy{
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<article class="search-result-container">This is a track with lots of information</article>
<div id="queue-bar">This is the droppable area</div>
Updated your fiddle, it works now!!
http://jsfiddle.net/rqyv6bpg/2/
Here is the JS code:
$( ".text" ).draggable({helper:'clone'});
$( "#queue-bar" ).droppable({
drop: function( event, ui ) {
$( this ).append( "<br/>"+ui.draggable.html() );
}
});
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 made a quick drag and drop type menu. Basically I made it so you drag an item from a list into the trash div, and it will give you an alert saying "gone"
I want to make it so that you can't just drag the item anywhere. It has to go into the trash or ".list4" it's called, or else send it back to it's original position.
Here is the JSFiddle: http://jsfiddle.net/Gdze8/
Here is the Javascript:
$( init )
function init() {
$(".contentItem").draggable();
$(".list4").droppable( {
drop: handleDropEvent
});
}
function handleDropEvent ( event, ui ) {
var draggable = ui.draggable;
alert("Gone")
}
Also, while I'm here, would there be a way to delete the item once it goes in the "trash"?
Try this
$(".contentItem").draggable({ revert: 'invalid' });
JS Fiddle Demo
use :
$( ".draggable" ).draggable({ revert: "invalid" });
to get it back to its original position.
use:
$( "#dorp" ).droppable({
accept: ".draggable",
drop: function( event, ui ) { ui.draggable.remove(); }
});
to remove an element dropped.
HERE IS A DEMO : jsfiddle
AND YOU CAN USE { helper: "clone" } : jsfiddle2
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