We Keep Coding

contenteditable not working after sorting

After sorting content editable is not working on left click but on right click it working. WHY?
$(function(){
$("#textTemplate").draggable({
helper: "clone",
zIndex: 2500
});
$( "#editorDesignView" ).droppable({
accept: '#textTemplate',
drop: function( event, ui ) {
var html = '<div id="" style="background: #eee; width: 80%; margin: 10px auto; padding: 10px;"><p contenteditable="true" style="padding: 5px;">Add your text here.</p></div>';
$(html).appendTo(this).hide().slideDown();
}
});
$('#editorDesignView').sortable();
});
Here is my jsfiddle

It might be better if you create a handler for sortable element since its overtake the click event. I created an element with .draggable-area and use it on sortable handle option
$(function(){
$("#textTemplate").draggable({
helper: "clone",
zIndex: 2500,
});
$( "#editorDesignView" ).droppable({
accept: '#textTemplate',
drop: function( event, ui ) {
var html = '<div id="" style="background: #eee; width: 80%; margin: 10px auto; padding: 10px;"><p contenteditable="true" style="padding: 5px;">Add your text here.</p><div style="padding:20px;" class="draggable-area"></div></div>';
$(html).appendTo(this).hide().slideDown();
}
});
$('#editorDesignView').sortable({
handle: '.draggable-area'
});
});
Updated your fiddle

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 to set a result if draggable is dropped in droppable in Jquery?

I am trying to increase the value of a counter (var counter = 0;), if the draggable image on screen is dropped into the dropzone (also a image, not a div).
$( "#goldbag" ).draggable({ revert: "invalid", containment: "parent" });
$( "#jack2" ).droppable({
drop: function(event, ui) {
draggedObj = ui.draggable.attr('id');
$("#"+draggedObj).fadeOut(function() { $(this).remove(); });
$( "img" ).draggable({ disabled: true });
}
});
This code just fades out the droppable after its dropped on the image. Before/after it fades out I want to increment the counter by 1.
Note: Both #goldbag and #jack2 are images (<img>) inside a single container div.

You can just extend your drop callback function.
Here is an over simplified example, where you can drag and drop the same item multiple times while increasing a counter.
Most of this code was taken from the docs here: https://jqueryui.com/droppable/#default
$(function() {
var $counter = $("#counter");
var count = 0;
$("#draggable").draggable();
$("#droppable").droppable({
drop: function(event, ui) {
$(this)
.addClass("ui-state-highlight")
.find("p")
.html("Dropped!");
count++;
$counter.html(count);
}
});
});
#draggable {
width: 100px;
height: 100px;
padding: 0.5em;
float: left;
margin: 10px 10px 10px 0;
}
#droppable {
width: 150px;
height: 150px;
padding: 0.5em;
float: left;
margin: 10px;
}
<link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<div id="draggable" class="ui-widget-content">
<p>Drag me to my target</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>
<p>Counter: <span id="counter">0</span>
</p>

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

JQuery how to instigate modalbox (dialog) on button click

I have coded with some help a drag and drop program..
Everything works fine, i just need help to implement a dialog box (using JQuery UI 1.10.3) to open instead of default window popup box when button "Generate Report" is clicked.
Please can someone help?
here is http://jsfiddle.net/GRDww/39/
HTML
<body>
<!-- Add your site or application content here -->
<div id="container">
<!--header and nav will go here-->
<section>
<!--drag from div-->
<div class="col1">
<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">Total Sales</h5>
<img src="http://hasankhan.co.uk/ao/img/totalsales.png" alt="Total Sales" width="96" height="72" />
Transfer Across
</li>
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">Availability</h5>
<img src="http://hasankhan.co.uk/ao/img/availability.png" alt="Availability" width="96" height="72" />
Transfer Across
</li>
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">Completed</h5>
<img src="http://hasankhan.co.uk/ao/img/completed.png" alt="Completed Sales" width="96" height="72" />
Transfer Across
</li>
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">Pending</h5>
<img src="http://hasankhan.co.uk/ao/img/pending.png" alt="Pending Sales" width="96" height="72" />
Transfer Across
</li>
</ul>
</div><!--col1-->
<!--drag into div-->
<div class="col2">
<div id="transfer">
<h4 class="ui-widget-header"><span>Drop icons here</span></h4>
</div><!--transfer-->
</div><!--col2-->
</section><!--section-->
<section>
<div class="col3">
<button class="generate">Generate Report</button>
<button class="reset">Reset</button>
</div><!--col3-->
</section>
</div><!--container-->
</body>
JQuery
$(function() {
// there's the gallery and the transfer
var $gallery = $( "#gallery" ),
$transfer = $( "#transfer" );
// 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 );
}
});
// 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();
alert(content.join(','));
});
//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;
});
});
CSS
#container{width:100%; margin:0 auto; background-color:#999; position:relative;
clear:both;}
header{background:url(../img/header-bg.jpg) no-repeat #fff; height:100%;}
#logo{position:relative; float:left; width:126px; height:107px;}
#slogan{float:right;}
#slogan-image{float:right;}
nav{height:30px; background-color:#a4abb1; clear:both; width:100%; margin:0 auto;
overflow:hidden;}
nav ul{width:800px; margin:0 auto;}
nav ul li{list-style-type:none; float:left; padding:8px 20px; color:#FFF; font-
size:14px; font-weight:lighter; border-left:#FFF solid 1px;}
nav ul li.last{border-right:1px solid #FFF;}
nav ul li:hover{background-color:#333; cursor:pointer;}
nav a{color:#FFF; text-decoration:none;}
section .col1{width: 55%; float:left; background:#dcdcdc; border-radius:5px; margin-
top:40px; min-height:250px;}
section .col2{width: 40%; float:right; background:#dcdcdc; border-radius:5px; margin-
top:40px; padding:1%;}
section .col3{width: 55%; float:right; margin-top:10px; clear:both;}
.gallery.custom-state-active { background: #eee;}
.gallery li { float: left; width: 96px; padding: 0.4em; margin: 0.4em 0.4em;
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; }
#transfer { float: right; width: 100%; min-height: 250px; }
#transfer h4 { line-height: 16px; margin: 0 0 0.4em; }
#transfer h4 .ui-icon { float: left; }
#transfer .gallery h5 { display: none; }
button{display:block; margin-top:20px; width:200px;}

JSFiddle is so helpful! I added some HTML for the modal box, CSS to hide it, and javascript to initialize it and link it to the click handler you already had set up for it. Here's the result of those additions.
HTML:
<div id="gen_dialog">
<p class="diag-content"></p>
</div>
CSS:
#gen_dialog {display:none;}
Initialize the dialog:
// set up the generate button's dialog box
$gen_dialog.dialog({
autoOpen:false,
height:140,
'title': 'Generated Report',
modal:true
});
Line added to your button.generate click handler:
$gen_dialog.find('.diag-content').html(content.join(', ')).end().dialog('open');