Basically what I have is a set of doodads, and what I need to do is to be able to drag any item in that set into a containment box. Once they are in the box, they can still be moved around and manipulated freely, but they can't be taken out of the box again though they can be deleted.
The doodads are also set to clone as a user can have more than one of the item in the box if they so desire.
So the two parts are, set up the doodad list (already done), and then make it draggable so that it can be dragged into the droppable div box. Then the second part is that once it's in the div box, it must be draggable again, not clonable, and also contained in the box.
Here's my JS code:
$(document).ready(function() {
function MakeDraggable(item) {
item.draggable({
revert : "invalid"
});
}
$(".doodad").draggable({
helper : 'clone',
scroll : true
});
$(".dropped").draggable ({
containment: ".box"
});
$(".box").droppable({
accept : ".doodad",
activeClass : "ui-state-default",
hoverClass : "ui-state-hover",
drop : function(event, ui) {
var droppedItem = $(ui.draggable).clone();
//droppedItem.class = ".dropped";
droppedItem.draggable();
//ui.draggable.draggable('option', 'revert', false);
//droppedItem.draggable();
$(this).append(droppedItem);
}
});
});
I've tried many things. I tried changing the element's ID to something else so that it can take on that class' draggable attributes. I've also tried programming it within the drop function, but I'm having issues.
I have no idea how to refer to the draggable element just dropped in order to manipulate it. I was told it was $(ui.draggable), or $(ui.draggable).clone(), but when I try referring to that and calling draggable on it with my desired options, it doesn't work. The best I've gotten was that it was draggable after dropping, but it kept duplicating itself and was not contained within the box.
Any help would be greatly appreciated, and I am new to all of this stuff. I did look at the JQuery API but it didn't help me much in this regard.
Edit:
My Html is:
<body>
<img src="doodads/i1.gif" class="doodad">
<img src="doodads/i2.gif" class="doodad">
<img src="doodads/i3.gif" class="doodad">
<img src="doodads/i4.gif" class="doodad">
<div class="box" />
</body>
CSS is:
.box {
width:500px;
height:500px;
background: orange;
}
You can set a class on the dropped element e.g. copied and than check if the dropped element have already that class and if so stop the cloning.
To constrain the movement inside the box you can use containment option of draggable:
Constrains dragging to within the bounds of the specified element or
region.
Code:
$(document).ready(function () {
$(".doodad").draggable({
helper: 'clone',
scroll: true
});
$(".dropped").draggable({
containment: ".box"
});
$(".box").droppable({
accept: ".doodad",
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function (event, ui) {
if ($(ui.draggable).hasClass('copied')) return
var droppedItem = $(ui.draggable).clone().addClass('copied');
droppedItem.draggable({
containment: ".box"
});
$(this).append(droppedItem);
}
});
});
Demo: http://jsfiddle.net/IrvinDominin/ufHMm/
EDIT
To get the dropped element position we had to calculate and use it, using:
$(ui.helper).position().top - $(this).position().top
$(ui.helper).position().left - $(this).position().left
we get the helper position along its container.
Final code:
$(document).ready(function () {
$(".doodad").draggable({
helper: 'clone',
scroll: true
});
$(".dropped").draggable({
containment: ".box"
});
$(".box").droppable({
accept: ".doodad",
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function (e, ui) {
if ($(ui.draggable).hasClass('copied')) return
var droppedItem = $(ui.draggable).clone().addClass('copied').css({
position: "relative",
top: $(ui.helper).position().top - $(this).position().top,
left: $(ui.helper).position().left - $(this).position().left
}).draggable({
containment: ".box"
});
$(this).append(droppedItem);
}
});
});
Demo: http://jsfiddle.net/IrvinDominin/ufHMm/3/
Related
I'm trying to drag "templates" (initially as clones) from a "store" into droppable slots. Thereafter I want to be able to drop the dragged item into whatever slot I wish. Draggables are set as follows:
$( ".template" ).draggable({
helper: "clone",
}
);
$( ".item" ).draggable();
I got round the issue of the thing re-cloning by replacing the "template" class with an "item" class on first drop and within the drop function switching from a clone to a straight element as follows:
$( ".template-slot" ).droppable({
accept: ".template, .item",
drop: function( event, ui ) {
if(ui.draggable.hasClass("template")) {
$(this).append(ui.draggable.clone())
// add item class
$(".template-slot .template").addClass("item");
// remove template class
$(".item").removeClass("ui-draggable template");
// expand to fit the slot
$(".item").addClass("expand-to-slot");
// make it draggable again
$(".item").draggable();
}
if(ui.draggable.hasClass("item")) {
$(this).append(ui.draggable);
}
}
});
The first drag and drop works okay. the problem arises on the second drag and drop. The element drags okay but when dropped it gets placed twice as far in whatever direction I drag it. So, for example, if I've dragged it 50px to the right, it drops 100px to the right. the same with up and down etc.
I suspect it's something to do with the offset being cumulative but haven't worked out why it's doing this or how to fix it.
I've created a fiddle here: https://jsfiddle.net/stefem1969/a86jmnxu/10/ to show the problem.
Hope someone can help.
Working Example: https://jsfiddle.net/Twisty/fu83zq2y/11/
JavaScript
$(function() {
function makeDrag(obj, opt) {
if (obj.hasClass("ui-draggable")) {
obj.removeClass("ui-draggable");
obj.attr("style", "");
}
if (opt === undefined) {
opt = {};
}
obj.draggable(opt);
}
makeDrag($(".template, .item"), {
helper: "clone",
});
$(".template-slot").droppable({
accept: ".template, .item",
drop: function(event, ui) {
if (ui.draggable.hasClass("template")) {
console.log("it has the template class!");
var newItem = ui.draggable.clone();
newItem.toggleClass("template item");
newItem.addClass("expand-to-slot");
newItem.appendTo($(this));
makeDrag(newItem);
}
if (ui.draggable.hasClass("item")) {
console.log("it has the item class!")
var droppableOffset = $(this).offset();
console.log("droppableOffset: ", droppableOffset);
ui.draggable.attr("style", "").appendTo($(this));
}
}
});
$(".template-store, .thagomizer").droppable({
accept: ".item",
drop: function(event, ui) {
ui.draggable.remove();
}
});
});
Part of draggable is to set a top and left when moving it around. Even if you append the item to another element, it will still have those. Clearing that can help accomplish what you're looking for.
The makeDrag() is just helpful to perform the same operations a lot.
Hope this helps.
I'm new to jquery, there is no question on this, I wanted my submit button able to get ids of multiple images in droppable, anyone can help? please help me or guide me along... I need to get the ids of the image that is only dragged inside the droppable and when submit button is pressed.. Display the image that is only inside droppable..
jsFiddle
https://jsfiddle.net/xInfinityMing/azvvhxvL/
JavaScript
$(function() {
$("#dragIcons img").draggable({
revert: "invalid",
refreshPositions: true,
cursor: "move",
cursorAt: {
top: 56,
left: 56
},
drag: function(event, ui) {
ui.helper.removeClass("end-draggable");
ui.helper.addClass("draggable");
},
stop: function(event, ui) {
ui.helper.addClass("end-draggable");
ui.helper.removeClass("draggable");
}
});
$("#briefcase-full").droppable({
greedy: true,
tolerance: 'touch',
drop: function(event, ui) {
var id = ui.draggable.attr("id");
alert(id);
if ($("#briefcase").length == 0) {
$("#briefcase-droppable").html("");
}
ui.draggable.addClass("dropped");
$("#briefcase-droppable").append(ui.draggable);
}
});
});
Basically, all the dragged element will go inside the droppable. so you can use children to check every elements.
$("#briefcase-droppable").children(".icons").each(function() {
var icon_id= $(this).attr("id");
});
JSFiddle : Link
I suggest you to use class instead of using img element to attach draggable event.
I want to dynamically create a draggable div on mousedown, which within the same mousedown event can then be dragged into a droppable area and dropped.
The point that I have got to so far is that a new draggable div is created on mousedown and that div then follows the cursor. But it cannot be dropped into the droppable area.
JS Fiddle here - http://jsfiddle.net/rqyv6bpg/
The jQuery code:
jQuery(document).ready(function ($) {
//on mousedown, creates a new draggable div in the cursor position
$(".search-result-container").mousedown(function(e){
var x = e.pageX + 'px';
var y = e.pageY + 'px';
$('<div/>', {
"class": "test",
text: "Draggable track that can be dropped into droppable queue!",
}).css({
"position": "absolute",
"left": x,
"top": y,
"z-index": 1000
}).draggable()
.appendTo($(document.body))
});
//in order to get the newly created div to instantly follow the cursor
$(document).on('mousemove', function(e){
$('.test').css({
left: e.pageX,
top: e.pageY
});
});
$( "#queue-bar" ).droppable();
});
Help would be greatly appreciated! Thanks in advance.
If I understood correctly, you are looking for the helper option of draggable widget.
$(document).ready(function($) {
$(".search-result-container").draggable({
helper: "clone", // use a clone for the visual effect
revert: false
});
$("#queue-bar").droppable({
accept: "article",
drop: function(event, ui) {
ui.draggable.clone().appendTo(this); // actually append a clone to the droppable
}
});
});
$(document).ready(function($) {
$(".search-result-container").draggable({
helper: "clone", // use a clone for the visual effect
revert: false
});
$("#queue-bar").droppable({
accept: "article",
drop: function(event, ui) {
ui.draggable.clone().appendTo(this); // actually append a clone to the droppable
}
});
});
.search-result-container {
background-color: red
}
#queue-bar {
background-color: blue
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<article class="search-result-container">This is a track with lots of information</article>
<div id="queue-bar">This is the droppable area</div>
You can also create a custom helper by returning an element to be used as helper as shown below:
$(document).ready(function($) {
$(".search-result-container").draggable({
helper: function(){
// return a custom element to be used for dragging
return $("<div/>",{
text: $(this).text(),
class:"copy"
})
}, // use a clone for the visual effect
revert: false
});
$("#queue-bar").droppable({
accept: "article",
drop: function(event, ui) {
//you might want to reset the css using attr("style","")
ui.helper.clone().appendTo(this); // actually append a clone of helper to the droppable
}
});
});
.search-result-container {
background-color: red;
}
#queue-bar {
background-color: blue;
}
.copy{
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<article class="search-result-container">This is a track with lots of information</article>
<div id="queue-bar">This is the droppable area</div>
Updated your fiddle, it works now!!
http://jsfiddle.net/rqyv6bpg/2/
Here is the JS code:
$( ".text" ).draggable({helper:'clone'});
$( "#queue-bar" ).droppable({
drop: function( event, ui ) {
$( this ).append( "<br/>"+ui.draggable.html() );
}
});
I made a quick drag and drop type menu. Basically I made it so you drag an item from a list into the trash div, and it will give you an alert saying "gone"
I want to make it so that you can't just drag the item anywhere. It has to go into the trash or ".list4" it's called, or else send it back to it's original position.
Here is the JSFiddle: http://jsfiddle.net/Gdze8/
Here is the Javascript:
$( init )
function init() {
$(".contentItem").draggable();
$(".list4").droppable( {
drop: handleDropEvent
});
}
function handleDropEvent ( event, ui ) {
var draggable = ui.draggable;
alert("Gone")
}
Also, while I'm here, would there be a way to delete the item once it goes in the "trash"?
Try this
$(".contentItem").draggable({ revert: 'invalid' });
JS Fiddle Demo
use :
$( ".draggable" ).draggable({ revert: "invalid" });
to get it back to its original position.
use:
$( "#dorp" ).droppable({
accept: ".draggable",
drop: function( event, ui ) { ui.draggable.remove(); }
});
to remove an element dropped.
HERE IS A DEMO : jsfiddle
AND YOU CAN USE { helper: "clone" } : jsfiddle2
The draggables in my drag and drop game should only be able to be dropped in the designated area highlighted by the css.
$('.drag').draggable({
helper: 'clone',
snap: '.drop',
grid: [60, 60],
revert: 'invalid'
});
$('.drop').droppable ({
drop: function(event, ui) {
word = $(this).data('word');
}
});
The CSS style is called .showword, and the click event that triggers it is called "#picknext".
Any ideas how I would get the draggable to revert if it wasn't dropped in the styled area?
Something like this...
$('#picknext').click({
drop: function(event, ui) {
word = $(this).data('word');
}
});
Here is something that should get you started.
http://jqueryui.com/demos/droppable/#revert
Rather than having a function for your revert property you want to set it to invalid as discussed in that options help: http://docs.jquery.com/UI/Draggable#option-revert