We Keep Coding

Drag and drop image, store image ID via ajax form

I am trying to make a drag and drop function, the image should be draggable onto a section and be stored into a "folder". Each folder would have it's own ID. The model is working but now I need some front-end wizardry to make it look good, similar to how Gmail works where you drag an email into a folder.
This is what I have so far, I managed to get it working with dragging the image onto a textbox, hiding the textbox doesn't have the same effect, though.
HTML Image:
<img id="{{$preview->id}}" draggable="true" src="{{$preview->img_thumb}}" data-zoom-image="{{$preview->img_url}}" data-imgid="{{$preview->id}}" data-imgexp="exposure" class="img-rounded draggie" height="80" width="120"></img>
JS:
<script>
$(document).ready(function() {
$(".draggie").draggable({
containment: "parent",
cursor: "move",
revert: true,
revertDuration: 100
});
var targetName;
$(".draggie").mousedown(function(){
exposure = $(this).attr("data-imgexp");
id = $(this).attr("data-imgid");
});
$("#image-id").droppable({
accept: ".draggie",
drop: function(event) {
$('#image-exp').val($('#image-exp').val() + exposure);
$('#image-id').val($('#image-id').val() + id);
}
});
});
</script>

Taking the JQuery UI Droppable Demo, I made the following that you can start with: https://jsfiddle.net/Twisty/9j93xnu2/3/
HTML
<div class="ui-widget ui-helper-clearfix">
<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">Peaks</h5>
<img src="http://thumb1.shutterstock.com/display_pic_with_logo/278821/252659818/stock-photo-beautiful-view-of-mount-ama-dablam-way-to-everest-base-camp-nepal-252659818.jpg" alt="" width="96" height="72">
View larger
Delete image
</li>
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">Rock</h5>
<img src="http://thumb9.shutterstock.com/display_pic_with_logo/1516148/324716942/stock-photo-landscape-of-zhangjiajie-taken-from-old-house-field-located-in-wulingyuan-scenic-and-historic-324716942.jpg" alt="" width="96" height="72">
View larger
Delete image
</li>
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">High Tatras 3</h5>
<img src="images/high_tatras3_min.jpg" alt="Planning the ascent" width="96" height="72">
View larger
Delete image
</li>
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">High Tatras 4</h5>
<img src="images/high_tatras4_min.jpg" alt="On top of Kozi kopka" width="96" height="72">
View larger
Delete image
</li>
</ul>
<div id="folder-1" class="folder ui-widget-content ui-state-default">
<h4 class="ui-widget-header"><span class="ui-icon ui-icon-folder-open">Folder</span> Folder 1</h4>
</div>
<div id="folder-2" class="folder ui-widget-content ui-state-default">
<h4 class="ui-widget-header"><span class="ui-icon ui-icon-folder-open">Folder</span> Folder 2</h4>
</div>
<div id="trash" class="folder ui-widget-content ui-state-default">
<h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span> Trash</h4>
</div>
</div>
CSS
#gallery {
float: left;
width: 65%;
min-height: 12em;
}
.gallery.custom-state-active {
background: #eee;
}
.gallery li {
float: left;
width: 96px;
padding: 0.4em;
margin: 0 0.4em 0.4em 0;
text-align: center;
}
.gallery li h5 {
margin: 0 0 0.4em;
cursor: move;
}
.gallery li a {
float: right;
}
.gallery li a.ui-icon-zoomin {
float: left;
}
.gallery li img {
width: 100%;
cursor: move;
}
.folder {
float: right;
width: 30%;
min-height: 6em;
padding: 1%;
margin: 3px 0;
}
.folder h4 {
line-height: 16px;
margin: 0 0 0.4em;
}
.folder h4 .ui-icon {
float: left;
}
.folder .gallery h5 {
display: none;
}
JQuery
$(function() {
// there's the gallery and the trash
var $gallery = $("#gallery"),
$trash = $("#trash"),
$folder_1 = $("#folder-1"),
$folder_2 = $("#folder-2");
// 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 trash be droppable, accepting the gallery items
$trash.droppable({
accept: "#gallery > li",
activeClass: "ui-state-highlight",
drop: function(event, ui) {
deleteImage(ui.draggable);
}
});
$folder_1.droppable({
accept: "#gallery > li",
activeClass: "ui-state-highlight",
drop: function(event, ui) {
moveImage(ui.draggable, event.target.id);
}
});
$folder_2.droppable({
accept: "#gallery > li",
activeClass: "ui-state-highlight",
drop: function(event, ui) {
moveImage(ui.draggable, event.target.id);
}
});
// let the gallery be droppable as well, accepting items from the trash
$gallery.droppable({
accept: "#trash li",
activeClass: "custom-state-active",
drop: function(event, ui) {
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>";
function moveImage($item, t) {
console.log("Image moving to " + t);
var $target = $("#" + t);
$item.fadeOut(function() {
var $list = $("ul", $target).length ? $("ul", $target) : $("<ul class='gallery ui-helper-reset'/>").appendTo($target);
$item.find("a.ui-icon-trash").remove();
$item.append(recycle_icon).appendTo($list).fadeIn(function() {
$item.animate({
width: "48px"
})
.find("img")
.animate({
height: "36px"
});
});
});
}
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"
});
});
});
}
// 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) {
$item.fadeOut(function() {
$item
.find("a.ui-icon-refresh")
.remove()
.end()
.css("width", "96px")
.append(trash_icon)
.find("img")
.css("height", "72px")
.end()
.appendTo($gallery)
.fadeIn();
});
}
// image preview function, demonstrating the ui.dialog used as a modal window
function viewLargerImage($link) {
var src = $link.attr("href"),
title = $link.siblings("img").attr("alt"),
$modal = $("img[src$='" + src + "']");
if ($modal.length) {
$modal.dialog("open");
} else {
var img = $("<img alt='" + title + "' width='384' height='288' style='display: none; padding: 8px;' />")
.attr("src", src).appendTo("body");
setTimeout(function() {
img.dialog({
title: title,
width: 400,
modal: true
});
}, 1);
}
}
// 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-trash")) {
deleteImage($item);
} else if ($target.is("a.ui-icon-zoomin")) {
viewLargerImage($target);
} else if ($target.is("a.ui-icon-refresh")) {
recycleImage($item);
}
return false;
});
});
This example allows the user to drag an image to a folder, using moveImage($item, t) where $item is the draggable item and t is the target ID. You can update this function to pass the image URL via AJAX to your database to store it in a "folder" or whatever else you need to do.

Drag and drop with the help of jQuery

I'd like to be able to move an object into another with the function draggable of jQuery.
I can move an object in the container and able to move in it.
But when I try to add helper to objects to move, this no longer works.
I want that when I select an item to deposit it in my container, it duplicates itself.
Below is what I have managed to do for the moment:
JSFiddle
$(".drag").draggable({
opacity: 0.7,
snap: '#drop',
cursor: "move",
revert: "invalid",
//helper: "clone"
});
$("#drop").droppable({
drop: function(event, ui) {
}
});
<div class="drag">
<p>Exemple bloc</p>
</div>
<div class="drag">
<p>Exemple bloc</p>
</div>
<div id="drop">
<p>Drop here</p>
</div>
The element I deposited in .drop clone and must be able to move in the container .drop

this a working demo that can help you
HTML
<div id="wrapper">
<div id="origin" class="fbox">
<img src="http://placehold.it/140x100" id="one" title="one" class="draggable" />
<img src="http://placehold.it/150x100" id="two" title="two" class="draggable" />
<img src="http://placehold.it/160x100" id="three" title="three" />
</div>
<p>CONTAINAIR</p>
<div id="drop" class="fbox">
</div>
</div>
JAVASCRIPT
$(".draggable").draggable({ cursor: "crosshair", revert: "invalid"});
$("#drop").droppable({ accept: ".draggable",
drop: function(event, ui) {
console.log("drop");
$(this).removeClass("border").removeClass("over");
var dropped = ui.draggable;
var droppedOn = $(this);
$(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);
},
over: function(event, elem) {
$(this).addClass("over");
console.log("over");
},
out: function(event, elem) {
$(this).removeClass("over");
}
});
$("#drop").sortable();
$("#origin").droppable({ accept: ".draggable", drop: function(event, ui) {
console.log("drop");
$(this).removeClass("border").removeClass("over");
var dropped = ui.draggable;
var droppedOn = $(this);
$(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);
}});
CSS
#origin
{
background-color: lightgreen;
}
#origin img, #drop img {
margin-top: 3px;
margin-left: 5px;
}
#drop
{
background-color: red;
min-height: 120px;
}
.over {
border: solid 5px purple;
}
.draggable
{
border: solid 2px gray;
}

I have edited your fiddle:
http://jsfiddle.net/3tjbhjtq/54/
Here is the code:
$(".drag").draggable({
opacity : 0.7,
snap : '#drop',
cursor : "move",
revert : "invalid",
helper : "clone"
});
$("#drop").droppable({
drop: function(event, ui) {
var currenOffset = ui.offset;
var dropedObjectCss = {
"position" : "absolute",
"left" : currenOffset.left,
"top" : currenOffset.top
};
var tag = ui.draggable;
if (tag.data('alreadydropped')) {
var newItem = tag.css(dropedObjectCss).appendTo( this );
newItem.draggable({
opacity : 0.7,
snap : '#drop',
cursor : "move",
revert : "invalid"
});
} else {
var newItem = tag.clone().css(dropedObjectCss).appendTo( this );
newItem.data('alreadydropped', true).draggable({
opacity : 0.7,
snap : '#drop',
cursor : "move",
revert : "invalid"
});
}
}
});
Is this result that you want?
The idea is that we should have different behavior when the item is dropped for the first time
and when is moved in the container. This is the reason that we keep alreadydropped in data.
So the first time (else block) we clone the object and append to the container and
set alreadydropped to true. After this every time when user move the item
we will enter into if condition and the item will not be cloned and only moved into contaner.

You need to apply the draggable function to the item after it is cloned and add a class to it. After if the item is returned to the initial position you delete it:
HTML Code
<div id="container">
<div class="drag">
<p>Exemple bloc 1</p>
</div>
<div class="drag">
<p>Exemple bloc 2</p>
</div>
</div>
<div id="drop">
<p>Drop here</p>
</div>
CSS Code
#container{
width: 100%;
}
.drag {
height: 50px;
width: 50px;
background: #505050;
color: #FFFFFF;
padding: 10px;
display: inline-block;
margin: 0 10px 10px 10px;
}
#drop {
width: 100%;
height: 600px;
background: #FFFFFF;
border: 1px solid #999999;
}
jQuery code
makeDragable($(".drag"));
$("#drop").droppable({
accept: ".drag",
drop: function(event, ui) {
if( $(ui.draggable).hasClass("cloned") ) {
$(ui.draggable).css(ui.offset).css("position", "absolute");
return;
}
var item = $(ui.draggable).clone();
item.addClass("cloned");
$(this).append(item);
makeDragable(item);
}
});
$("#container").droppable({
accept: ".cloned",
drop: function(event, ui) {
$(ui.draggable).detach();
}
});
function makeDragable(item) {
item.draggable({
opacity: 0.7,
cursor: "move",
helper: "clone"
});
}
jsfiddle

How can I create jQuery UI droppables recursively?

I'm using jQuery UI for drop and drag.
When the draggable item is dropped I use the drop function that appends a new HTML element and makes it draggable and droppable. It works in the first instance ( see http://jsfiddle.net/ze5zgfsq/1/ ) but the draggable + droppale features (including the drop functio) don't extend deeper than that.
I want it to work recursively, though, so that if another draggable element is dropped inside the created element (the dropped one) then a new draggable, droppable element is created within that and so on.
Here's the sample code:
$("#draggableObject").disableSelection();
$("#draggableObject").draggable({
revert: "invalid",
helper: "clone",
opacity: 0.7
});
$(".container").droppable({
accept: "#draggableObject, .droppedObject",
activeClass: "stateHighlight",
hoverClass: "stateHover",
greedy: true,
drop: function (event, ui) {
$(this).append('<li class="droppedObject" style="color:black;text-align:center;">Dropped Object</li>');
$(".droppedObject").draggable({
revert: "invalid",
helper: "clone",
opacity: 0.7
}).droppable({
accept: "#draggableObject, .droppedObject",
activeClass: "stateHighlight",
hoverClass: "stateHover",
greedy: true,
drop: function (event, ui) {
$(this).append('<li class="droppedObject" style="color:black;text-align:center;">Dropped Object</li>');
$(".droppedObject").draggable({
revert: "invalid",
helper: "clone",
opacity: 0.7
});
}
});
}
});
And here's the HTML/CSS:
<ul>
<li id="draggableObject">Draggable Object</li>
</ul>
<ul class="container">
<li>Drop Items Here</li>
</ul>
ul {
height: 300pt;
width: 200pt;
border: 1pt solid blue;
border-radius: 2pt;
}
li {
display: block;
min-height: 100pt;
min-width: 100pt;
border: 1pt solid black;
border-radius: 2pt;
margin: 2pt;
cursor: move;
text-align: center;
}

I came across your question while trying to implement something similar. See if this helps:
http://jsfiddle.net/sdqfotqe/1/
The trick I used is to create the options object separately then use it inside itself i.e. $d.droppable(droppableOptions);
It doesn't do exactly what you are trying to do, but should help with the recursive side of things.
HTML:
<div id="divItems">
<div data-fhirq-type="group" class="editor-choice">Group</div>
<div data-fhirq-type="question" class="editor-choice">Question</div>
</div>
<br/><br />
<div id="divQuestionnaire">
<div id="divRootGroup" class="editor-group"></div>
</div>
CSS:
.editor-group {
border: 1px solid #000;
min-height: 50px;
width:100%;
padding:20px;
background: #efefef;
}
.editor-question {
border: 1px solid #000;
min-height: 50px;
width:100%;
padding:20px;
background: #677b92;
}
.editor-choice {
cursor:move;
width: 100px;
height: 75px;
background: #ccc;
display:inline-block;
}
.droppable-hover {
background: #fffa00;
}
.remove-choice {
width:25px;
height:25px;
border: 1px solid #ddd;
}
JavaScript:
$(document).ready(function () {
$('#divGroupOptions').hide();
$('#divQuestionOptions').hide();
var droppableOptions = {
accept: '.editor-choice',
greedy: true, /* only drop the element in one place */
hoverClass: "droppable-hover", /* highlight the current drop zone */
drop: function (event, ui) {
/* clone, because many elements can be added - it's a copy, not a move */
$d = $(ui.draggable).clone();
$d.removeClass('editor-choice');
$d.addClass(($d.attr('data-fhirq-type') == 'group') ? 'editor-group' : 'editor-question');
/* add a button so the element can be removed if no longer necessary */
var $removeBtn = $('<button class="remove-choice">x</button>').click(function () { $(this).parent().remove(); });
$d.append($removeBtn);
/* make the new element droppable i.e. to support groups within groups etc... */
$d.droppable(droppableOptions).sortable();
$(this).append($d);
}
};
$("#divRootGroup").droppable(droppableOptions).sortable();
$(".editor-choice").draggable({
helper: 'clone'
});
});

Javascript on hover dropdown

I am new to javascript and I need help with this simple script.
It is a shopping cart drop down which currently functions when the field is clicked. I want drop down to fade in on mouse over. I tried adding .hover instead of .live and also tried adding mouse in after 'click' but nothing worked. Any help would be highly appreciated. Thanks!
javascript/jQuery
$('#cart > .heading a').live('click', function() {
$('#cart').addClass('active');
$('#cart').load('index.php?route=module/cart #cart > *', function() {$( "#cart .content" ).fadeIn( "slow" );});
$('#cart').live('mouseleave', function() {
$(this).removeClass('active');
$( "#cart .content" ).hide();
});
});
css
#header #cart .content {
clear: both;
display: none;
position: relative;
padding: 8px;
min-width: 300px;
border: 5px solid #D84D7F ;
background: #FFF;
}
#header #cart.active .heading {
}
#header #cart.active .content {
display: block;
}

Use following,Prevent default behavior of href, like click .Use on not live
$('#cart > .heading a').on('hover', function(e) {
e.preventDefault();
$('#cart').addClass('active');
$('#cart').load('index.php?route=module/cart #cart > *', function() {$( "#cart .content" ).fadeIn( "slow" );});
$('#cart').on('mouseleave', function() {
$(this).removeClass('active');
$( "#cart .content" ).hide();
});
});

Get links to stay active

I have 4 options that, when clicked, the clicked option becomes focused and its background-color/text color change, while all the other revert to the normal states. I have some code where I can change font color, but I can't figure out how to change the div color. I'm also trying to figure out in CSS and with this code how to have one of the options be by default highlighted when the page loads.
Jquery- the last line "($("a")" is the line of code that changes font color; the code above it has to do with a filtering system I have on the page.
$(function () {
var $panels = $( '#image-wrapper .panel' );
$( '#category > div > a' ).on( 'click', function (event) {
event.preventDefault();
var categoryToShow = $( this ).data( 'filter' );
$panels.addClass( 'active' ).filter( '.' + categoryToShow ).removeClass( 'active' );
$("a").addClass("active-color").not(this).removeClass("active-color");
/*$("#category .current-div").addClass("active-bg").not(this).removeClass("active-bg");*/
} );
});
HTML
<div id="category">
<div class="all-div current-div">
<h2>ALL</h2>
</div>
<div class="ed-div current-div">
<h2>EDITORIAL</h2>
</div>
<div class="pr-div current-div">
<h2>PR</h2>
</div>
<div class="cr-div current-div">
<h2>CREATIVE</h2>
</div>
</div>
CSS
#content,
#category {
overflow: hidden;
}
#category div {
float: left;
margin: 40px 0 0 0;
height: 100px;
width: 240px;
background-color: #F5F5F5;
}
#category .all-div {
background-color: #000000;
}
#category .all-div a {
color: #ffffff;
}
.active-color {
color: #000000;
background-color: green;
}
.active-bg {
background-color: green;
}

Well, .on was not working on your selector so i changed it to .live and changed your selector for the backgrounds to .current-div because your a tags need display: block to have a visible background.
check this:
http://jsfiddle.net/A3n7S/15/
$(function () {
var $panels = $( '#image-wrapper .panel' );
$(".current-div").not('.all-div').first().addClass("active-color")
$( '#category > div > a' ).live( 'click', function (event) {
event.preventDefault();
var categoryToShow = $( this ).data( 'filter' );
$panels.addClass( 'active' ).filter( '.' + categoryToShow ).removeClass( 'active' );
$(".current-div").not('.all-div').removeClass("active-color");
$(this).parent().addClass("active-color");
/*$("#category .current-div").addClass("active-bg").not(this).removeClass("active-bg");*/
} );
});
Replace that:
.active-color {
color: #000000;
background-color: green;
}
with:
#category .active-color {
color: #000000;
background-color: green;
}