jQuery click on clone and in a window see/change name or delete

Question

I'm new in programming in jQuery and I need help. Basically, so far I have a code where I am dragging from toolbox and dropping clones.

html:

<div id="toolbox">
<div class="exponat" ></div>
<div class="bluetooth" ></div>
<div class="wall1" ></div>
<div class="wall2" ></div>
<div class="wall3" ></div>
<div class="wall4" ></div>
</div>
<br>
<div id="droppable"></div>

jquery:

      $("#droppable").droppable({
      // accept draggables only from #toolbox,
      // this will prevent cloning of the draggables(inside drop event handler),
      //  that already have been dropped inside #container
      accept: "#toolbox .exponat, #toolbox .bluetooth, #toolbox .wall1, #toolbox .wall2,#toolbox .wall3,#toolbox .wall4",
      drop: function (event, ui) {
        var $clone = ui.helper.clone();
        if (!$clone.is('.inside-droppable')) {
            $(this).append($clone.addClass('inside-droppable').draggable({
                containment: '.droppable',

                tolerance: 'fit',
                position: 'relaitve'
            }));

            $clone.resizable({
                //animate: 'true',
                //ghost: 'true',
                handles:     'ne, nw, se, sw',
                //containment: '.container',
            });                             
        }           
      },

  });

 // $("#container").resizable();
 $(".exponat").draggable({
      revert: "invalid",
      helper: "clone"
  });
 $(".bluetooth").draggable({
      revert: "invalid",
      helper: "clone"
  });
  $(".wall1").draggable({
      revert: "invalid",
      helper: "clone"
  });
  $(".wall2").draggable({
      revert: "invalid",
      helper: "clone"
  });
  $(".wall3").draggable({
      revert: "invalid",
      helper: "clone"
  });
  $(".wall4").draggable({
      revert: "invalid",
      helper: "clone"
  });

http://jsfiddle.net/pia92/kKa3n/

I want this scenario to be possible: -opening window on click on particular clone -in that window to see current name and have a possibility to change it by typing -have a button to delete a particular clone I have no idea whether it is possible, please give me a solution/some similar project/good tutorial. Thanks.

Answer 1

Step 1

Add id attribute to clones to indentify them.

...
drop: function (event, ui) {
var $clone = ui.helper.clone();
    // Give the clone an ID to indentify it.
    $clone.attr('id', 'clone' + $('.inside-droppable').length);
    if (!$clone.is('.inside-droppable')) {
...

Step 2

Create a popup windows to show clone's property:

...
<br>
<div id="droppable"></div>
<!-- Create a popup window -->    
<div id="property-window">
    Put textboxes, or anything you want here:<br/>
    ID: <input id="cloneName" type="text"/>
</div>

style it:

...
#property-window {
    background-color: white;
    border: 1px solid;
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    padding: 10px;
    display: none;
}

and make it draggable

  ...
  $(".wall4").draggable({
      revert: "invalid",
      helper: "clone"
  });
  // Make property window draggable
  $("#property-window").draggable();

Step 3

Add event handler to open the popup window:

$('body').on('click','.inside-droppable', function() {
    var target = $(this);
    $('#property-window').css({
        // Set position
        top: target.position().top,
        left: target.position().left + target.width(),
        // Show
        display: 'block'
    });
    // Update the value
    $('#property-window input#cloneName').val(target[0].id);
});

Here is a working demo: http://jsfiddle.net/trungdq88/qRM4R/

Hope this will help you, and don't forget to create a button to close the popup YOURSELF, good luck!