Insert A Textfield Or Checkbox On Mouse Click At Current Mouse Position Or Drag And Drop It

i am trying to insert a checkbox or textfield dynamicly on a mouse click at the mouseposition anywhere on the page or even better a drag and drop of textfields and checkboxes to an

Solution 1:

Sorry for replying late, was testing actually ;) Try SOMETHING(modify the logic according to your needs) like this:

$('body').click(function(e){ $('body').append($('<input />').css({position:'absolute',left:e.pageX,top:e.pageY}).focus());})

Solution 2:

You can use Draggle-Jquery plugin. Documentation and Demo

You just have to add jquery files and this simple code:

 $(function() {
  $( "#draggable" ).draggable();
 });

html(you can use other html elements):

<divid="draggable"class="ui-widget-content"><p>Drag me around</p></div>

Some more demos

Solution 3:

Quick thought:

Create a reusable input field (template)

var$textinput= '<input type="text" value="" style="position:absolute"/>';

Add click handler to the page

// Using jquery
$('body').on('click', function(event) {
    var posX = event.offsetX;
    var posY = event.offsetY;
    var$input = $textinput
    this.append($input);
    $input.css('{x: posX, y: posY}');
});

Then just send all the values back to server on save