Mark div objects as selected
I want to be able to mark objects div
as selected. These objects must have a class draggable
(red circles).
Also, the selection can be applied to those circles that are inside the div area that has the class dropzone
.
div.draggable.selected {
border:4px solid black;
-moz-border-radius:3px;
border-radius:3px;
}
JavaScript:
$(window).load(function(){
$(".draggable").click(function () {
$(this).toggleClass("selected");
});
});
How can i do this?
source to share
Since you are using interactive.js, you should put such class manipulation in your interaction event handlers. I was able to accomplish what I believe I wanted by adding a line $(target).addClass("selected");
to the interaction onmove
like so:
onmove: function(event) {
var target = event.target;
$(target).addClass("selected");
var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
and then also to the handler onend
:
$(event.target).removeClass("selected");
See full working example here: http://jsfiddle.net/weubd2yg/
source to share
Your window.load function is being overwritten in your jsfiddle link. If you instead place a listener $('.draggable').click()
inside the docReady function $(function(){ //code });
, it will bind to this event as expected.
Also, rewriting the listener $(document).click('.draggable',function(){ //code });
will not handle attaching this event to dynamically created .draggable elements, where it will not bind to existing .Draggable elements on page load.
source to share