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'
});
});
Related
I have example where I drag-drop elements to drop area. Basically all elements inside this area are cloned. I also want to implement selectable in this area, but there is a problem - how to select elements which are not part of the list?
I want to implement selectable on non-list elements. I've set
$(".ui-layout-center").selectable();
in droppable div and when I try to select area with mouse, I see lasso, like in this image:
How to select those elements? They are not part of the list, they are dropped clones.
I have example here
Code:
function setDraggable(el) {
el.draggable({
helper: 'original',
revert: false,
cursor: 'move'
});
}
function setResizable(el){
el.resizable({
});
}
$(function() {
$(".ui-layout-center").selectable();
$(".component").draggable({
helper: function() {
$clone = $(this).clone();
$clone.appendTo('body').css({'zIndex': 5});
return $clone;
},
cursor: 'copy',
containment: "document"
});
$('.ui-layout-center').droppable({
activeClass: 'ui-state-hover',
accept: '.component',
drop: function(event, ui) {
if (!ui.draggable.hasClass("dropped"))
var clone= $(ui.draggable).clone().addClass("dropped").draggable();
if(clone){
clone.css('left',ui.position.left);
clone.css('top',ui.position.top);
$(this).append(clone);
setDraggable(clone);
setResizable(clone);
}
}
});
});
CSS:
.ui-layout-center {
width: 800px;
height: 800px;
border: 1px solid black;
}
.ui-state-hover {
background-color: #f9ffff;
}
.ui-layout-center .component {
position:absolute !important;
}
.component{
width: 50px;
height: 50px;
background-color: yellow;
border: 1px solid black;
margin: 3px;
}
HTML:
i want to drag the (buttons,divs,images) and drop on to the canvas and then drag again inside the canvas. its not working properly only (divs) i can drag and drop and again start a dragging inside canvas not on buttons and other element
thanks
$(init);
function init() {
var diagram = [];
var canvas = $(".canvas");
$(".tool").draggable({
helper: "clone",
//cursor: "move",
cancel: false,
});
canvas.droppable({
drop: function(event, ui) {
console.log(ui.helper.prop("outerHTML"))
var new_signature = ui.helper.is('.ui-resizable') ?
ui.helper
:
$(ui.helper).clone().removeClass('tool ui-draggable ui-draggable-
handle ui-draggable-dragging');
$(this).append(new_signature);
new_signature.draggable({
helper: false
}).resizable()
}
});
}
this is a link of jsfiddle for further explanation
Some minor corrections you may want to consider.
JavaScript
function init() {
var diagram = [];
var canvas = $(".canvas");
$(".tool").draggable({
helper: "clone",
cancel: false,
});
canvas.droppable({
drop: function(event, ui) {
console.log(ui.helper.prop("outerHTML"));
var new_signature;
if (ui.helper.is('.ui-resizable')) {
new_signature = ui.helper;
} else {
new_signature = ui.helper.clone();
new_signature.removeClass("ui-draggable ui-draggable-handle ui-draggable-dragging");
new_signature.draggable({
helper: false,
containment: "parent"
}).resizable();
}
$(this).append(new_signature);
}
});
}
$(init);
Fiddle: https://jsfiddle.net/Twisty/0gLh2h6o/
Update
Often, it is best to avoid using draggable and resizable on some things, when there are other Click events that will be handled.
I would suggest creating a wrapper, and handle, that can be used to drag the element, and then resize upon the element.
Consider this:
HTML
<div style="width:20%;float:left;border:1px solid; height:400px">
<h6>buttons</h6>
<div>
<div class="fake tool button tool-1">Click</div>
<br/>
<div class="fake tool button tool-2">Click</div>
<hr />
</div>
</div>
<div style="width:78%;height:400px;float:right;border:1px solid;" class="canvas">
<p>
canvas
</p>
</div>
note:i want to drag these button multiple time and once it dopped inside canvas it can be draggable inside canvas and resizable
CSS
.tool-1,
.tool-2 {
width: 60px;
height: 1.5em;
border: 1px red solid;
border-radius: .2em;
text-align: center;
padding: 0.5em;
}
.tool-2 {
border: 1px green solid;
}
.canvas .tool_wrapper {
display: inline-block;
width: auto;
height: auto;
}
.canvas .tool_wrapper .tool_handle {
height: 10px;
line-height: 10px;
padding: 0;
margin: 0;
text-align: right;
}
.canvas .tool_wrapper .tool_handle .ui-icon {
margin-top: -.30em;
}
.canvas .tool_wrapper .ui-resizable-se {
margin-left: -5px;
margin-top: -5px;
}
.canvas .tool_wrapper .button {
width: 60px;
height: 1.5em;
border-radius: .2em;
text-align: center;
padding: 0.5em;
}
JavaScript
function init() {
var diagram = [];
var canvas = $(".canvas");
$(".tool").draggable({
helper: "clone",
cancel: false,
});
canvas.droppable({
drop: function(event, ui) {
console.log(ui.helper.attr("class"));
if (ui.helper.hasClass("fake")) {
var new_signature;
if (ui.helper.hasClass("button")) {
new_signature = $("<div>", {
class: "tool_wrapper ui-widget",
style: ui.helper.attr("style")
});
new_signature.css("top", (parseInt(new_signature.css("top").substr(0, -2)) - 10) + "px")
var handle = $("<div>", {
class: "tool_handle ui-widget-header"
})
.html(" ").appendTo(new_signature);
var close = $("<span>", {
class: "ui-icon ui-icon-close"
}).appendTo(handle).click(function() {
if (confirm("Are you sure you want to remove this Button?")) {
new_signature.remove();
}
});
var tool = $("<div>", {
class: ui.helper.attr("class"),
contenteditable: true
})
.html(ui.helper.html())
.appendTo(new_signature).resizable();
tool.css({
width: "60px",
height: "1.5em",
"line-height": "inherit"
});
tool.removeClass("fake ui-draggable ui-draggable-handle ui-draggable-dragging");
}
new_signature.appendTo($(this));
new_signature.draggable({
handle: ".tool_handle",
helper: false,
containment: "parent"
})
}
}
});
}
$(init);
Here, we create a div wrapper and create a handle, with a close button, to use to move the element around. This becomes our draggable, and we can place a button, div, or img inside it. This allows contenteditable to receive it's own cl;ick event and not interfere with the click event that draggable is expecting, since it will only be looking for that on the handle.
Resizable is then assigned to the element itself to ensure that we change it's size and not just the size of the wrapper.
Actually, it works. Check the background color of the a element in fiddle:
https://jsfiddle.net/jakecigar/wngwsxw2/9/
.ui-resizable {
background: red;
}
The new_signature element has position:static after it is set to draggable. It needs to be absolute.
Use Twisty's version, add this lines:
cancel: false
after containment: "parent",
and
new_signature.css({position: 'absolute'});
just before $(this).append(new_signature);
It worked in my test.
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
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
I have a div that i can drag to other div, and its working fine.
But with helper: 'clone', its possible to drag the div, but the droppable its not working.
Do you know how to fix this?
jquery:
$(function () {
$(".draggable").draggable({ helper: 'clone', revert: 'invalid' });
$(".droppable").droppable({
accept: ".draggable"
});
});
working example: http://jsfiddle.net/p21z4jy0/
I think you are looking http://jsfiddle.net/p21z4jy0/2/
$(function () {
$(".draggable").draggable({ helper: 'clone', revert: 'invalid' });
$(".droppable").droppable({
accept: function(drag) {
var dropId = $(this).attr('data-id');
var dragId = $(drag).attr('data-id');
return dropId === dragId;
},
drop: function (event, ui) {
$('.droppable').append(ui.draggable);
}
});
});
.draggable{
width:100px;
border: 1px solid green;
}
.droppable {
width: 300px;
height: 100px;
margin: 10px;
border: 1px solid green;
}
.draggable {
height:50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/i18n/jquery-ui-i18n.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="draggable" data-id='a'>draggable a</div>
<div class="droppable" data-id='a'>droppable a</div>