Draggable not working? - javascript

Hi all i have a function where i have to drag and drop elements here is my code:
$(document).ready(function() {
var i = 0;
$("button[id='columnadd']").click(function () {
alert(1);
var domElement = $('<aside id="shoppingCart' + i + '" class="shoppingCart"><h2 class="ui-widget-header">Add Menu Items Here</h2><aside class="ui-widget-content" id="droppable"><ol><li class="placeholder">Add your items here</li></ol></aside></aside>');
i++;
$(this).after(domElement);
});
$(".small_box li" ).draggable({
appendTo: "body",
helper: "clone"
});
});
$('#shoppingCart ol').droppable({
accept: '.small_box li',
drop: function (event, ui) {
alert(1);
$(this).find(".placeholder").remove();
$("<li></li>").text(ui.draggable.text()).appendTo(this);
}
});
here is my html:
<aside class="small_box">
<h4>BRANDS</h4>
<ul>
<li id ="brand1"><a class="" href="#">Brand1</a></li>
<li id ="brand2">Brand2</li>
<li id ="brand3">Brand3</li>
<li id ="brand4">Brand4</li>
</ul>
</aside>
i should be able to drop in at this place <li class="placeholder">Add your items here</li>
var domElement = $('<aside id="shoppingCart' + i + '" class="shoppingCart"><h2 class="ui-widget-header">Add Menu Items Here</h2><aside class="ui-widget-content" id="droppable"><ol><li class="placeholder">Add your items here</li></ol></aside></aside>');
any help is much appreciated

First, please fix your code indentations.
There are some mistakes on your code:
var i = 0;
I think it should be a global variable. So put it outside your $(document).ready(function() {}) block;
You create a DOM Element (which is the drop area) upon click and this element is not in your page until you click the trigger. By doing $('#shoppingCart ol').droppable({...}) in $(document).ready(function() {}) block you try to add droppable to an element that even not in your page, so this won't do a thing.
What you should do is make the element droppable after you create that element and put it on your page. here's an example:
$("button[id='columnadd']").click(function () {
// create the element
var domElement = $('<aside id="shoppingCart' + i++ + '" class="shoppingCart"><h2 class="ui-widget-header">Add Menu Items Here</h2><aside class="ui-widget-content" id="droppable"><ol><li class="placeholder">Add your items here</li></ol></aside></aside>');
// put it after $(this)
$(this).after(domElement);
// at this point you have domElement in your page
// make it droppable
domElement.find("ol").droppable({
// put options here
greedy: true,
drop: function (event, ui) {
makeItDroppableToo(event, ui, this);
}
});
});
and this is the function to make your dropped element has its own placeholder
function makeItDroppableToo(e, ui, obj) {
$(obj).find(".placeholder").remove();
var placeholder = $("<ol><li class='placeholder'>You can also drop it here</li></ol>");
$("<li></li>").append(ui.draggable.text()).append(placeholder).appendTo($(obj));
// this is the same as the previous one
placeholder.droppable({
// put options here
greedy: true,
drop: function (event, ui) {
makeItDroppableToo(event, ui, this);
}
});
}

Try this fiddle, I was working with JQueryUI
http://jsfiddle.net/ashpriom/yHLGP/
$(function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});

Related

JQuery-UI draggable item become undraggable

I have 2 divs: leftDiv and mainDiv. leftDiv contains some list elements which are draggable and droppable into mainDiv. I want to make these dropped items draggable inside the mainDiv as well, but after the first drag inside this div, items become non draggable. How can I fix this? Here is my jQuery code:
$('#output li').draggable({
helper: 'clone',
revert: 'invalid'
});
$('#mainDiv').droppable({
drop: function (event, ui) {
if(ui.draggable.hasClass('foo')){
$(ui.helper).remove();
$(this).append(ui.draggable.draggable());
}
else {
var item = $('<div class="foo">').append(ui.draggable.text());
item.draggable();
$(this).append(item);
}
}
});
You can fix it like this:
$('#mainDiv').droppable({
drop: function (event, ui) {
if(ui.draggable.hasClass('foo')){
//$(ui.helper).remove();
var draggedItem = ui.draggable.draggable();
$(this).append(draggedItem);
draggedItem.draggable();
}
else {
var item = $('<div class="foo">').append(ui.draggable.text());
item.draggable();
$(this).append(item);
}
}
});
Online Demo (fiddle)

How do I make elements in jQuery Selectable deselected?

How do I make elements in jQuery Selectable deselected? At this Link it is well documented how to use jQuery Selectable but it is never mentioned how to deselect selected elements again. Any ideas?
<script>
$(function() {
$( "#selectable" ).selectable({
stop: function() {
var result = $( "#select-result" ).empty();
$( ".ui-selected", this ).each(function() {
var index = $( "#selectable li" ).index( this );
result.append( " #" + ( index + 1 ) );
});
}
});
});
</script>
<ol id="selectable">
<?php
for($i=1;$i<=9;$i++) {
echo "<li id=\"field_$i\" class=\"ui-state-default\">$i</li>";
}
?>
</ol>
Hold ctrl and click on the elements. It can also be used to make multiple selections.

Ordering images game

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;
});
});

How will we get the id of a particular <ul> in jquery?

This is the jquery function which makes the ul draggable and and a particular area droppable.
//Jquery
$(function () {
// there's the gallery5 and the trash
var $gallery5 = $("#gallery5"),
$trash = $("#trash");
// let the gallery5 items be draggable
$("ul", $gallery5).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 trash be droppable, accepting the gallery items
$trash.droppable({
accept: "#gallery > li",
accept: "#gallery2 > li",
activeClass: "ui-state-highlight",
drop: function (event, ui) {
alert("trash");
deleteImage(ui.draggable);
}
});
// let the gallery be droppable as well, accepting items from the trash
$gallery5.droppable({
accept: "#gallery li , #gallery2 li , #gallery4 li , #gallery3 li",
activeClass: "custom-state-active",
drop: function (event, ui) {
alert("gallery5");
recycleImage(ui.draggable);
}
});
// image deletion function
var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off' title='Recycle this image' class='ui-icon ui-icon-refresh'>Recycle image</a>";
// image recycle function
var trash_icon = "<a href='link/to/trash/script/when/we/have/js/off' title='Delete this image' class='ui-icon ui-icon-trash'>Delete image</a>";
function recycleImage ($item) {
// alert("recycleImage");
$item.fadeOut(function () {
$item
.find("a.ui-icon-refresh")
.remove()
.end()
.css("width", "250px")
.find("img")
.css("height", "50px")
.end()
.fadeIn()
.appendTo($gallery5);
});
}
// image preview function, demonstrating the ui.dialog used as a modal window
});
This is called in a loop and the data is coming from the database.
//BODY
<ul id=coming from database>
<li>
description
id
</li>
</ul>
There are multiple uls in the output. I want to check the id of that particular ul which i am dragging.
Thanx.
jQuery
$('ul').each(function(){
var ulID = $(this).attr('id');
});
This will get the ID from each ul, you can then do what you need with it . . .
Have you ever try this:
var ids = '';
$('ul').each(function(){
ids += $(this).attr('id');
});
Try this:
$('ul').each(function()
{
var ids= $(this).attr('id'); // This is your rel value
});

Jquery Drag & Drop: Change element from li to div and back

I am trying the following:
Stage 1:
Change the draggable element from li to div on drop in #canvas
Move the draggable element inside #canvas
Stage 2:
Change the draggable element from div to li on drop in #imagelist
Move the draggable element inside #imagelist
Js:
$(function () {
var $imagelist = $("#imagelist");
var $canvas = $("#canvas");
$('li', $imagelist).draggable();
$canvas.droppable({
drop: function (event, ui) {}
});
$imagelist.droppable({
drop: function (event, ui) {}
});
});
Html:
<div id="listwrapper">
<ul id="imagelist">
<li class="draggable>Content that should not be lost on drag/drop</li>
<li class=" draggable>Content that should not be lost on drag/drop</li>
</ul>
</div>
<div id="canvas">
<div class="draggable">Content that should not be lost on drag/drop</div>
</div>
Could someone help me with this?
You can create a new function to change the element type - which is what I think you need:
(function($) {
$.fn.changeElementType = function(newType) {
var attrs = {};
$.each(this[0].attributes, function(idx, attr) {
attrs[attr.nodeName] = attr.nodeValue;
});
this.replaceWith(function() {
return $("<" + newType + "/>", attrs).append($(this).contents());
});
};
})(jQuery);
see here
and here

Categories

Resources