jQuery says about the .remove() method
Use .remove() when you want to remove
the element itself, as well as everything inside it. In addition to
the elements themselves, all bound events and jQuery data associated
with the elements are removed.
But if you remove() the ui-wrapper around an image that has resizing, that doesn't seem to be the case. The image inside the ui-wrapper is left in the DOM. See jsfiddle here http://jsfiddle.net/stevea/jP6NY/2/.
So what is the proper way to removed an image that has resizing?
$(function(){
$('#pelican').resizable({handles : 'ne,se,sw,nw', aspectRatio : true});
});
$('button#removeImg').click(function() {
$('.ui-wrapper').remove();
});
Thanks
To remove the image and the wrapper that was created during the call to .resizable, use:
$('#pelican').remove();
To remove just the ability to resize the image, while leaving the image in its resized state, use:
$('.ui-wrapper').remove();
The reason for this is that jQuery and the jQuery UI widgets do some "tidying up" during the calls to .remove(), and the resizable's destructor, producing the behaviour above.
Related
I am using the jQueryUI resizable widget, and have a bunch of resizable boxes on a page. When the document loads, I initialize the widget, like so:
$('.ui-draggable').resizable({
minHeight: 10, // 10 is actually the default
minWidth: 10, // 10 is actually the default
resize: function() {
showProperties(this);
},
});
However, at some point I want only some of those elements to change resize options. What I'm trying to do is this:
if (type == 'sometype')
{
console.log($('#'+elementID).resizable('option', 'handles'));
$('#'+elementID).resizable('option', 'handles', 'e,w');
console.log($('#'+elementID).resizable('option', 'handles'));
}
This indeed outputs:
e,s,se
e,w
in the console, so the event is triggered and the selector is correct, but the code doesn't actually work: in fact, the handles remain the same, namely e, s, se.
Is this because I'm using a different selector from the original init? If so, how can I change the resize options only on a subset of originally-resizable elements? And if not, what could be the problem?
Handles are actually divs added to the element on which resizable is applied. It seems that changing the option doesn't refresh these handles. Maybe there's a way to apply the changes on specific subset and refresh, but I'm not sure how.
But one quick workaround would be to hide the handles you don't want instead of changing the handle option. You would have to set handle option to all the handles you'll need, and then hide those not wanted. Like this to remove se handle for example:
$('#'+elementID).find('.ui-resizable-se').hide();
I want to drop a small pattern into a div or into the body and have the background for that div or the body, whichever received the pattern, repeat the pattern in x and y. See jsfiddle . If I drag the pattern from the Gallery div and drop it in the body, just the body gets the background pattern. Great! That works. But if I drop the pattern into the canvas div, both the body and the canvas get the pattern. How can I just have the canvas get the pattern when it's the drop target. I tried every way I know, at the end of the drop handler, to stop propagation . . .
e.stopPropagation();
e.stopImmediatePropagation();
return false;
but nothing is working.
Thanks for any help.
You had it almost right. I've modified your fiddle to show the change.
You needed to add the greedy property in the thumb_dropOps object. Modify your function to be the following:
var thumb_dropOps = {
drop : thumb_drop,
accept : '#pattern',
greedy: true
};
Here is a reference link: jQuery UI - Droppable API Docs
Per the jQuery UI Documentation:
By default, when an element is dropped on nested droppables, each droppable will receive the element. However, by setting this option to true, any parent droppables will not receive the element. The drop event will still bubble normally, but the event.target can be checked to see which droppable received the draggable element.
I have a view for my model, and in the initialization I use the following code
initialize: function (){
_.bindAll(this, 'render');
this.listenTo(this.model, "change", this.render);
this.$el.draggable({
opacity: 0.5,
containment: "parent"
});
this.$el.resizable();
this.$el.selectable();
},
Although draggable works, resizable and selectable do not (I haven't tested other jQuery UI interactions to check if they work). I tried placing this.$el.resizable inside the render function, but that wouldn't work either. I'm using jQuery 1.8.3 and jQuery UI 1.9.2 (I do include the necessary jquery-ui.css in my html). When the view renders, I inspect the element in my browser and it does indeed have a class of ui.draggable, ui.resizable and ui.selectable as it is supposed to, yet it's only draggable.
Trying to work around this issue, I've used CSS3 property resize: both in the class of the element I want to resize and it works just fine, but I'd really like to utilize jQuery UI for resizing, and I'm curious why it won't work.
Any ideas what I might be doing wrong?
EDIT: Added jsfiddle example http://jsfiddle.net/IgnorantUser/u7JkX/ the problem described is in the initialization of the ButtonInCanvas backbone view
ok so, apparently using this.$el.html(this.template(this.model.toJSON())); in my render function on the ButtonInCanvas view was causing the problems. The aforementioned gets the "caption" attribute of the model, and passes it into the view as html content.
There solution is to put this.$el.html(this.template(this.model.toJSON())); in the init function.
In case it's needed to be done in the render function, there should be another div, within the one we want to resize, that will get the caption property from the model. In the following JSBIN you can see a solution using a div inside the button. (thanks to user shoky, from the #jquery freenode irc channel for the implementation and his heads up)
http://jsbin.com/uxequq/1/edit
I don't really understand why the problem was occurring though (maybe this.template(this.model.toJSON()) in my render function, was causing a re-rendering of the view?) so feel free to point me out why, and help me understand further!
Cheers!
I'm trying to build an interface tool which essentially allows users to build a grid out of common UI elements.
Here's a jsFiddle: http://jsfiddle.net/FX4Fw/
Essentially, the idea is that you drag content elements (picture, headline, standfirst, etc) into the grey placeholder at the bottom. Once they're in there, they should no longer be Draggables (because this breaks the CSS grid system they inherit) and they can then be resized. The original items in the UI should stay where they are, so the user is essentially cloning them into the box to be positioned.
This almost works in my demo, but when the user grabs a UI element and drags it into the placeholder, I then remove the ui-draggable class from the cloned element that ends up inside the placeholder. This also removes it from the original source element (I want this to stay where it is) so it's no longer usable.
Is there a way to combine these things so they work in tandem? Hopefully it's clear what I'm trying to do.
Never mind - found the answer here: https://stackoverflow.com/a/3041887/176615
(basically this code)
stop: function(event, ui) {
//check it wasn't here previously
if(!ui.item.data('tag') && !ui.item.data('handle')) {
ui.item.data('tag', true); //tag new draggable drops
ui.item.removeClass('ui-draggable'); // dirty hack
}
},
I'm using jQuery and I have the following problem:
In my site I have a chessboard with pieces. Every square is a simple div with the background property to show white or black. Over these squares (inside the divs) I've put an img tag referencing the piece that must be over that square. Something like:
<div id="a8" class="square" style="background-image: url('/images/background_white.png')">
<img id="piece_a8" class="piece" src="/images/rook_black.png" />
</div>
I can control the movement of the pieces using jQuery. Every piece-class img is a draggable and every square-class div is a droppable. I already have a server-side function that, given a set of coordinates, returns "VALID" if the movement is valid, and "INVALID" if otherwise. My idea is, if the server returns "INVALID", the piece must return to its origin square, and if the server returns "VALID", the piece must stay in its new square, deleting every other piece inside the target square.
My problem is, I don't know how can I enforce this return value in my jQuery code. I've tried putting functions in the revert property of the draggable, and in the accept and drop functions of the droppable, but I haven't found how to make $.get return false or true.
Any help would be really appreciated.
Thanks in advance,
Léster
Nevermind, answered.
In case someone needs to know, the trick is in 2 parts:
First: In the draggable definition, under the start event, add a function that saves the original position. Like this:
$('item_to_drag').draggable({
start: function(){
$(this).data("origPosition",$(this).position());
}
});
Second: In the droppable definition, under the drop event, do your .get and use a function to process the answer; in case your conditions are not met, animate the draggable back to its original position. Like this:
drop: function (event, ui) {
$.get(url,function(data) {
if (data == '"INVALIDO"')
{
ui.draggable.animate(ui.draggable.data("origPosition"),"slow");
}
else
{
//store new positions, whatever;
}
}
);
}
That'll do the trick.
Part of the answer came from here: In jQuery, how to revert a draggable on ajax call failure? .