Jquery Ui draggable want to set Position for drop

Question

Using Jquery UI draggable.

In which I am dragging a (#b1)thumbnail & appending a div.But i want to set drop area.Like if i drag my thumbnail in a .box(border box) then only append works & else not.I want to set such condition. My code

$( "#b1" ).draggable({ revert: true });
    $( ".box" ).droppable({
      hoverClass: "ui-state-hover",
      drop: function( event, ui ) {
        $( this )
          .addClass( "ui-state-highlight" )

      }
    });

    $( "#b1" ).draggable({
      start: function(event, ui) {
          console.log(event);   
            console.log(ui);    
      },

      stop: function(event, ui) {

            $(".box").append('<div id="box'+objArr.length+'" class="border" onclick="$(this).resizable();$(this).draggable();"><img src="close.png" alt="close" width="20" height="20" class="close" id=box"'+objArr.length+'" onclick="$(this).parent().hide();">  <textarea rows="2" class="txt" id="TextBox'+objArr.length+'" cols="2"></textarea></div>');



      }
    });

This is my fiddle code: http://jsfiddle.net/zha4v66u/2/

Answer 1

set droppable like

  $(".box").droppable({
    accept: "#b1",
    drop: dropped,
    scope: "drop",

})

function dropped(event, ui) {


        $(this).append(ui.draggable);
        $(ui.draggable).css({ "left": "0", "top": "0" });
    }

}

http://api.jqueryui.com/droppable/#option-accept

Answer 2

jQuery('#droppable').droppable(
{
    accept: '#draggable',
    drop: function(event, ui)
    {
        ui.draggable.data('dropped', true);
        // awesome code that works and handles successful drops...
    }
});

jQuery('#draggable').draggable(
{
    revert: false,
    start: function(event, ui) {
        ui.helper.data('dropped', false);
    },
    stop: function(event, ui)
    {
        alert('stop: dropped=' + ui.helper.data('dropped'));
        // Check value of ui.helper.data('dropped') and handle accordingly...
    }
});

You can try this using accept feature. jQuery drag and drop - checking for a drop outside a droppable

Answer 3

Below solution. Hope this solves the issue.

Step 1: Html

<div id="draggable" class="ui-widget-content">
  <p>Drag me to my target</p>
</div>

<div id="droppable" class="ui-widget-header">
  <p>Drop here</p>
</div>

Step 2: Jquery

<script>
  $(function() {
    $( "#draggable" ).draggable();
    $( "#droppable" ).droppable({
      drop: function( event, ui ) {
       // After drop done
      }
    });
  });
  </script>