Mark div objects as selected

Question

This is my jsfiddle.

I want to be able to mark div objects as selected. These objects should have a class draggable (red circles).

Also, the selection can be applied to those circles that are inside div area that has a 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 it?

Answer 1

Because you are using interact.js, you should put such class manipulation into your interact event handles. I was able to accomplish what I believe you wanted by adding the line $(target).addClass("selected"); to the interact 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 onendhandler:

$(event.target).removeClass("selected");

For a complete working example, see here: http://jsfiddle.net/weubd2yg/

Answer 2

Your window.load function is being overwritten in your jsfiddle link. If you instead place the $('.draggable').click() listener inside a docReady function, $(function(){ //code });, it will then be attached to that event as expected.

Also, rewriting the listener to $(document).click('.draggable',function(){ //code }); will handle attaching this event to dynamically created .draggable elements, where as binding it to the existing .draggable elements on page load will not.