jquery ui draggable想設置位置爲drop

Question

使用jQuery UI可拖動。

在哪，我拖着（＃B1）縮略圖&追加div.But我想成立降area.Like如果我在.box的（邊界框）拖我的縮略圖，然後只追加工程&別的不行。我想設置這樣的條件。 我的代碼

$("#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>'); 



     } 
    }); 

這是我的小提琴代碼：http://jsfiddle.net/zha4v66u/2/

Answer 1

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... 
    } 
}); 

您可以嘗試使用此功能接受。 jQuery drag and drop - checking for a drop outside a droppable

Answer 2

一套可放開像

$(".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 3

下面的解決方案。希望這可以解決這個問題。

步驟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> 

第2步：jQuery的

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