I would appreciate if someone can help me out,
here's my code :
`https://jsfiddle.net/m796a3ud/`
What I want to do is drag an image from these list of Images and be able to get a clone that's draggable, and when I put it inside the box it counts how many images are inside, it works good for the most part but when I try to drag the cloned image in and out of the box a couple of times the clone gets cloned it self which is not what I want, I would really appreciate the help!
thanks.
You have to call ui.helper.remove(); on the out event, try this:
$(function() {
// document.addEventListener('mousemove', function(event) {
// console.log($(':hover').hasClass('draggable'))
// })
var n = 0;
$( ".draggable" ).draggable({helper: 'clone'});
$( ".wrong" ).draggable();
$( "#droppable" ).droppable({
accept: ".draggable",
drop: function( event, ui) {
console.log(ui.draggable)
console.log($(':hover').hasClass('draggable'))
var new_signature = $(ui.helper).clone().removeClass('draggable');
new_signature.draggable();
$(this).append(new_signature);
if($(new_signature).hasClass("ui-draggable") && !$(new_signature).hasClass("dropped")){
$(new_signature).addClass("dropped draggable")
n++;
$(".count").text("There are " + n + " divs inside parent box detail.");
}
},
out: function(event, ui) {
ui.helper.remove();
if($(ui.draggable).hasClass("draggable") && $(ui.draggable).hasClass("dropped")) {
$(ui.draggable).removeClass("dropped")
console.log(ui.helper)
}
if( n > 0) {
n--
}
$(".count").text("There are " + n + " divs inside parent box detail.");
}
});
});
I am trying to make a simple game in which I show five movie posters and the user has to order them by release date, like shown in the attached picture (these posters are random ones I found).
Each picture is coded like this:
<div id="div11" ondrop="drop(event)" ondragover="allowDrop(event)" style="display:inline-block; position:relative">
<img value="5" src="../images/movies/hobbit.png" draggable="true" ondragstart="drag(event)" id="drag15" width="162" height="240">
</div>
Where div11 means div1,image1, so the others will be like div12, div13...The image id drag15 means that this images is the fifth in the correct order, so the others are drag11, drag12...
And the div where they are going to be put is like this:
<div id="div21" ondrop="drop(event)" ondragover="allowDrop(event)" style="display:inline-block; position:relative"></div>
So the image with the id="drag13", for example, has to be put in the div with id="div23". I have the following function to allow the dragging and dropping of the images in the blank divs, but when I drag an image to a div where there is already an image, the second one disappears:
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
Here you can find a jsfiddle to try and help you understand what I mean and what I have at the moment: http://jsfiddle.net/3GKPn/2/
The problem is in the ondrop event handler, when dropping on an img (not a div), you use this code:
ev.target.appendChild(document.getElementById(data));
That will append the dragged image to the target which is also an image. Hence the dragged image disappears. You have to check if the dropping target is an image or not, if it's an image, the natural behavior is swapping the 2 images. Here is the code it should be:
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
var dragged = document.getElementById(data);
//check if the dropping target is an image
if(ev.target.tagName == "IMG") {
//preparing to swap the 2 images (the dragged image and the target image)
var parent = ev.target.parentElement || ev.target.parentNode;
dragged.parentElement.appendChild(ev.target);
parent.appendChild(dragged);
} else {
//check if the div already has some img,
//swap the 2 images
if(ev.target.children.length > 0) {
dragged.parentElement.appendChild(ev.target.children[0]);
}
ev.target.appendChild(dragged);
}
}
I've also modifying the CSS a little to make the images smaller for better rendering (and testing) right in jsFiddle.
Updated demo.
Try this fiddle : DragAndDropModule
$(function() {
// there's the gallery and the transfer
var $gallery = $( "#gallery" ),
$transfer = $( "#transfer" ),
$gen_dialog = $( '#gen_dialog' );
// let the gallery items be draggable
$( "li", $gallery ).draggable({
cancel: "a.ui-icon", // clicking an icon won't initiate dragging
revert: "invalid", // when not dropped, the item will revert back to its initial position
containment: "document",
helper: "clone",
cursor: "move"
});
// let the transfer be droppable, accepting the gallery items
$transfer.droppable({
accept: "#gallery > li",
activeClass: "ui-state-highlight",
drop: function( event, ui ) {
deleteImage( ui.draggable );
}
});
// let the gallery be droppable as well, accepting items from the transfer
$gallery.droppable({
accept: "#transfer li",
activeClass: "custom-state-active",
drop: function( event, ui ) {
recycleImage( ui.draggable );
}
});
// set up the generate button's dialog box
$gen_dialog.dialog({
autoOpen:false,
height:140,
'title': 'Generated Report',
modal:true
});
// function for generating info of icon/s in drop box
$('button.generate').click(function() {
var content = $('ul li h5', $transfer).map(function(i, v) {
return $(this).text();
}).get();
$gen_dialog.find('.diag-content').html(content.join(', ')).end().dialog('open');
});
//function for resetting the icons back to original positions
$('button.reset').click(function() {
$('ul li', $transfer).each(function() {
recycleImage($(this));
});
});
toggleButtons();
// image deletion function
var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off' title='Transfer this icon back' class='ui-icon ui-icon-transfer-e-w'>Transfer this icon back</a>";
function deleteImage( $item ) {
$item.fadeOut(function() {
var $list = $( "ul", $transfer ).length ?
$( "ul", $transfer ) :
$( "<ul class='gallery ui-helper-reset'/>" ).appendTo( $transfer );
$item.find( "a.ui-icon-transferthick-e-w" ).remove();
$item.append( recycle_icon ).appendTo( $list ).fadeIn(function() {
$item
.animate({ width: "48px" })
.find( "img" )
.animate({ height: "36px" }, function() {
toggleButtons();
});
});
});
}
// image recycle function
var transfer_icon = "<a href='link/to/transfer/script/when/we/have/js/off' title='Transfer Across' class='ui-icon ui-icon-transferthick-e-w'>Transfer Across</a>";
function recycleImage( $item ) {
$item.fadeOut(function() {
$item
.find( "a.ui-icon-transfer-e-w" )
.remove()
.end()
.css( "width", "96px")
.append( transfer_icon )
.find( "img" )
.css( "height", "72px" )
.end()
.appendTo( $gallery )
.fadeIn(function() {
toggleButtons();
});
});
}
// display buttons when icon transferred across
function toggleButtons() {
$('div.col3 button').toggle($('> ul > li', $transfer).length > 0);
}
// resolve the icons behavior with event delegation
$( "ul.gallery > li" ).click(function( event ) {
var $item = $( this ),
$target = $( event.target );
if ( $target.is( "a.ui-icon-transferthick-e-w" ) ) {
deleteImage( $item );
} else if ( $target.is( "a.ui-icon-transfer-e-w" ) ) {
recycleImage( $item );
}
return false;
});
});
So far I have it so if an image/section is dragged onto another div it will change the image of the div, but how can I have it so if a certain image/section with the class is dropped onto the div then it'll add a class to it and if another image/section is dropped onto it then another class is added?
So far I have this for the drag and drop:
$(function() {
$( "#draggable" ).draggable({
drag: function(event, ui) {
$( this )
.addClass( "choppedonion" )
.find( "section" )
.html( "" );
}
});
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "fullbowl" )
.find( "div" )
.html( "" );
}
});
});
On the drop event you can reference the draggable element with ui.draggable. Then you can check if the element has the class you're looking for:
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "fullbowl" )
.find( "div" )
.html( "" );
var $draggable = $(ui.draggable);
if( $draggable.hasClass('oneClass')) {
$draggable.addClass('addedClass');
}
if( $draggable.hasClass('otherClass')) {
$draggable.addClass('otherAddedClass');
}
}
});
Here's a quick demo.
I am using the jQuery DataTables plug-in in my application. I need to select the multiple rows in a jQuery datatable using the mouse drag option. How is it possible?
Use jQuery-UI selectable and code similar to the following:
$( "#yourTable" ).selectable(
{
distance: 10,
stop: function()
{
$( this ).find( "tr" ).each(
function () {
if ( $( this ).hasClass( 'ui-selected' ) )
$( this ).addClass( 'row-selected' );
else
$( this ).removeClass( 'row-selected' );
});
}
});
I use 'distance: 10' because I found that otherwise my mousedown handler for the table wouldn't get events - this may not be important for you.
I have had a look about the site and found some code and tried it out but its not working in any shape or form.
I am wanting to count the number of DIVs that's placed into another DIV by the user dragging and dropping but only to count the 'correct' ones then if all the correct ones are in the DIV display an alert saying well done then rest the 'game'. Also need to show how many more is needed to go to 'win'.
This is what I have so far:
JS:
$('.drop').each(function(){
var n = $(this).children('.draggable').length;
$(".count").text("There are " + n + " divs inside parent box detail.");
if(n == 2){
alert("You got them all right! :)");
}
});
HTML:
<div class="foods">
<div class="draggable" id="draggable"><img src="images/fish.png" id="draggable"></div>
<div class="draggable" id="draggable"><img src="images/stone.png"></div>
<div class="wrong"><img src="images/tree.png"></div>
</div>
<div class="foods">
<div id="droppable" class="drop">
<p>Drop here</p>
</div>
</div>
<div class="foods">
<span class="count"></span>
</div>
JS Fiddle of the code: http://jsfiddle.net/JRLZK/
The problem is the duplicate IDs you are giving. I used class instead of id, but you can apply your own logic there.
$( "#droppable" ).droppable({
drop: function( event, ui) {
if($(ui.draggable).hasClass("draggable")){
$( this )
.find( "p" )
.html( "Correct! :)" );
} else {
$( this )
.find( "p" )
.html( "Wrong! :(" );
}
}
});
Demo
Update
Here is a workaround for the count
var div = $("<div />"); //a temp container
$( "#droppable" ).droppable({
drop: function( event, ui) {
ui.draggable.clone().appendTo(div);
if(div.children(".draggable").length == 2) {
alert('correct');
}
}
});
Demo
This should do it with your logic.
$(function() {
var n = 0;
$( ".draggable" ).draggable();
$( ".wrong" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui) {
console.log($(ui));
if($(ui.draggable).hasClass("draggable")){
$( this )
.find( "p" )
.html( "Correct! :)" );
n++;
$(".count").text("There are " + n + " divs inside parent box detail.");
if(n == 2){
alert("You got them all right! :)");
}
} else {
$( this )
.find( "p" )
.html( "Wrong! :(" );
}
}
});
});