I have two blocks, one is "draggable only" and the other is "droppable only".
Inside the first one I have some images which I can drag and drop them into the second one.
After I drop the image from the first block into the second one I want to replace the dropped image with a bigger image.
I'm thinking to use replaceWith() method but the problem is that is replacing also the parent element.
For example, I have this in the "draggable only":
<li class="draggable ui-draggable ui-draggable-handle" id="header-1">
<img src="http://placehold.it/150x100">
</li>
and this in the "droppable only" after the element is dragged from the "droppable only":
<img src="http://placehold.it/400x300">
As you noticed the replaceWith() is replacing the parent element also and I don't want this.
Also I need way to dinamically add an image based on what item was dragged.
Right now, is like this :
$('.testing').replaceWith('<img src="http://placehold.it/400x300">');
This will replace every item with the same image and I don't want this.Every item should have it's own image.
This is the JS code for the "draggable only":
$(".draggable").draggable({
connectToSortable: '.sortableList',
cursor: 'pointer',
helper: 'clone',
revert: 'invalid',
start: function (event, ui) {
$(this).addClass('testing');
}
});
and this is fro the "droppable only":
$(".sortableList").sortable({
receive: function (event, ui) {
//alert('It works');
$('.testing').replaceWith('<img src="http://placehold.it/400x300">');
}
});
Here's a JSBIN ( HOVER OVER "HEADERS" AND DRAG AND DROP THE IMAGE OVER THE CONTAINER IN THE RIGHT)
Put addClass("testing") inside function of recieve under sortable method instead of inside start of draggable method, it should work
$(".sortableList").sortable({
receive: function (event, ui) {
//alert('It works');
$(this).addClass('testing');
$('.testing').replaceWith('<img src="http://placehold.it/400x300">');
}
});
$(".draggable").draggable({
connectToSortable: '.sortableList',
cursor: 'pointer',
helper: 'clone',
revert: 'invalid',
start: function (event, ui) {
//Not here
}
});
Jsbin
Check the Updated Working Fiddle
Related
If one of those parents are emptied (the children moved over to the other parent) then you won't be able to move the child back to the empty parent.
https://jsfiddle.net/k8x7om75/
// Sort the parents
$(".sortMenu").sortable({
containment: "document",
items: "> div",
tolerance: "pointer",
cursor: "move",
opacity: 0.7,
revert: 300,
delay: 150,
placeholder: "menuPlaceholder",
start: function(e, ui) {
ui.placeholder.height(ui.helper.outerHeight());
}
});
// Sort the children
$(".menuItems").sortable({
items: "> div",
tolerance: "pointer",
containment: "document",
connectWith: '.menuItems'
});
Normally I'd do myself, but I don't know JavaScript or any of it's flavors. Sorry if this seems trivial, but I need help on this. Thank you
add the following css:
.ui-sortable{
padding: 5px;
}
You are facing this issue because as soon as your parent container becomes empty then the height of the sortable div in the parent container becomes 0 leaving no place for a child to be dragged back into it.
if you do not want the extra padding, then make the css as follows:
.ui-sortable{
min-height: 10px;
}
I have a problem with my drag and drop function
This is my Canvas
<canvas id="note" class="lego"
width="10" height="20">
</canvas>
My Drag and drop create a clone and place it in my div (div ID is "section"), after the drop i remove his class "lego" and add a new one named "legopiazzato"
If i leave the style of the clone with "position : absolute" there is no problem.
But i need relative, because i want the top/left cordinates on the div and not the top/left cordinates on the document.
The problem is: with relative, after the drop operation, he take the mouse position absolute and, with this, set the top/left of my clone in respect of the div (my clone is placed in a different location than where I left with the drop operation)
I thought to subtract this absolute cordinates, but I don't know exactly how to do
How can i fix??
This is my DraganDrop:
$(document).ready(function () {
var x = null;
$(".lego").draggable({
helper: 'clone',
cursor: 'move',
revert: "invalid",
tolerance: "pointer",
stop: function (e, ui) {
$(".ui-draggable-dragging").addClass("legopiazzato");
$(".ui-draggable-dragging").removeClass("lego");
$(".ui-draggable-dragging").dblclick(function() {
$(this).remove();
});
$(".legopiazzato").draggable({
cursor: 'move',
grid: [ 1,1]
});
}
});
$("#section").droppable({
drop: function (e, ui) {
if ($(ui.draggable)[0].id != "") {
x = ui.helper.clone();
ui.helper.remove();
console.log(ui.position.left);
console.log(ui.position.top);
x.draggable({
helper: 'original',
containment: '#section',
tolerance: 'fit'
});
x.appendTo('#section');
}
}
});
});
I'm looking for a way to toggle the scrolling of a datatable when using a draggable link ala jqueryUI.
Due to space constraints I need a scrolling DataTable and due to UI requirements I need draggable links.
Example I fleshed out: http://jsfiddle.net/sqwgs6wb/8/
JavaScript from the sample:
$(document).ready( function () {
var table = $('#example').DataTable({
"scrollX": true,
"scrollCollapse": true,
"bJQueryUI": true,
"scrollY": 140 });
$( init1 );
$( init2 );
$( ".makeMeDraggable" ).on( "drag", function( event, ui ) {
$('#status').html("dragging");
} );
$( ".makeMeDraggable" ).on( "dragstop", function( event, ui ) {
$('#status').html("Stopped dragging");
} );
} );
function init1() {
$('.makeMeDraggable').each(function(i) {
$(this).draggable({
revert: true,
delay: 100,
helper: "clone",
containment: "document"});
})}
function init2() {
$('#makeMeDroppable').droppable( {
drop: handleDropEvent
} );
}
function handleDropEvent( event, ui ) {
var draggable = ui.draggable;
alert( 'A Link was dropped onto me! with a URL of: ' + draggable.attr('href') );
}
Using jqueryUI I can detect when a datatable item(link) is being dragged and when it is done being dragged but the problem I'm running into is that the contents of the table shift around when I want to drag a link onto a drop area. Thus losing their place in the table.
I've looked on Stack and on datatables.net and I think it might be possible to access an extended function and freeze it but I'm not sure about how to do that.
I would very much like the contents of the table to not move when a user drags a draggable item from the datatable. Basically, freezing the table scroll in the X and Y axis would rock and naturally I would need the ability to unfreeze it.
I found a post that had a similar problem and verified that the solution fixes your problem in the fiddle. Here is the thread that discusses it
Draggable element hidden outside container
Basically, these 3 options need to be setup on your draggble setup
helper: 'clone',
revert: 'invalid',
appendTo: 'body'
Here is a working update of the fiddle with these options
http://jsfiddle.net/sqwgs6wb/11/
It's a JqueryUI issue, or rather my lack of knowledge of all the options.
The answer is to add appendTo to the jqueryUI Draggable initialization.
http://jsfiddle.net/sqwgs6wb/9/
function init1() {
$('.makeMeDraggable').each(function(i) {
$(this).draggable({
revert: true,
delay: 100,
helper: "clone",
appendTo: 'body', //<-==This is what fixed it.
containment: "document"});
})}
The appendTo 'body' option causes the draggable item to be created at the body level and not inside the scrollable container like it was before.
I'm not super experienced and was hoping someone could give me some tips.
I'm trying to create a system where images can be transferred from a holding container to a manipulative container where they can be re-sized and dragged.
I have a manipulative here: Fiddle Demo
And am trying to get the "click in/double-click out" system to work here: Fiddle Demo
<div class="frame"></div>
<div class="inventory">
<images>
</div>
$(".frame img")
.draggable({
containment: "parent",
cursor: "move"
}).resizable({
aspectRatio:1,
containment: "parent",
minHeight: 50,
minWidth: 50
});
$('.inventory img').click(function(){
$(this).appendTo(".frame");
});
$('.frame img').dblclick(function(){
$(this).appendTo(".inventory");
$(this).removeClass('added');
});
The main problem I believe is that once I append the divs, the js doesn't refresh and apply based on the arrangements of elements.
Any help would be greatly appreciated!
Thank you!
Since the evaluation of the selectors need to be dynamic you need to use event delegation
$('.inventory').on('click', 'img', function () {
$(this).appendTo(".frame");
});
$('.frame').on('dblclick', 'img', function () {
$(this).appendTo(".inventory");
$(this).removeClass('added');
});
Demo: Fiddle
Note: This will not handle the resizable/draggable behaviors - you will need to manually destroy/add this behaviors when you move the element from one container to another one
I updated Arun P Johny's fiddle: http://jsfiddle.net/u4xKW/2/.
$(".frame img")
.draggable({
containment: "parent",
cursor: "move"
}).resizable({
aspectRatio: 1,
containment: "parent",
minHeight: 50,
minWidth: 50
});
$('.inventory').on('click', 'img', function () {
$(this).resizable({
aspectRatio: 1,
containment: "parent",
minHeight: 50,
minWidth: 50
});
$(this).parent().appendTo(".frame").draggable({
containment: "parent",
cursor: "move"
});
});
$('.frame').on('dblclick', '.ui-draggable', function () {
$(this).appendTo(".inventory");
$(this).draggable("destroy");
$("img", this).resizable("destroy");
});
This adds and removes the draggable and resizable functions from the items when they are added and removed.
With jQuery I have a draggable element. It's a div with a size of 200 x 40.
Of course the user can start dragging this div by clicking at variuos positions in the div.
What I want is when the startdrag event happens, the helper (clone) div will always be aligned to the cursor the same way, no matter where in the div the user started dragging.
So after the mousedown the helper's top and left values need to be the same as the mouses x and y. I've tried this using this coffeescript code:
onStartDrag: ( e, ui ) =>
ui.helper.css
left: e.clientX
top: e.clientY
console.log( e )
But it doesn't work and my guess is that this is happening because the values I put in are directly overwritten by the draggable plugin because of mouse movement..
Any ideas?
After trying Amar's answer and realizing that it screws up interactions with droppable, I dug deeper, and found that there is an option specifically to support this called cursorAt.
$('blah').draggable
helper: ->
... custom helper ...
cursorAt:
top: 5
left: 5
This places the top-left corner of the helper 5 pixels above and to the left of the cursor, and interacts correctly with droppable.
http://api.jqueryui.com/draggable/#option-cursorAt
And let's give credit where credit is due. Thanks, jquery-ui mailing list archives!
https://groups.google.com/forum/#!topic/jquery-ui/Evb94G_QvNw
Try setting like this,
start: function (event, ui) {
$(ui.helper).css("margin-left", event.clientX - $(event.target).offset().left);
$(ui.helper).css("margin-top", event.clientY - $(event.target).offset().top);
}
Take a look at this jqFAQ.com , it will be more helpful for you.
I've found a fix for this and it's very easy, if you are using the sortable plugin you can fix the helper position like this:
sort: function(e, ui) {
$(".ui-sortable-handle.ui-sortable-helper").css({'top':e.pageY});
}
I Agree with #roverv.
This works fine form me.
$('.js-tire').draggable
tolerance: 'fit',
appendTo: 'body',
cursor: 'move',
cursorAt:
top: 15,
left: 18
helper: (event) ->
$('<div class="tire-icon"></div>').append($('<img src="/images/tyre_32_32.png" />'))
start: (event, ui) ->
if $(event.target).hasClass 'in-use'
$('.js-send-to-maintenance-box').addClass 'is-highlighted'
else
$('.ui-droppable').addClass 'is-highlighted'
stop: (event, ui) ->
$('.ui-droppable')
.removeClass 'is-highlighted'
.removeClass 'is-dragover'
This did the trick for me:
appendTo: 'body'
Like so:
$(this).draggable({
helper: "clone",
cursor: "move",
appendTo: 'body'
});