Jquery Ui可拖动想要设置放置位置答案

【问题标题】：Jquery Ui draggable want to set Position for dropJquery Ui可拖动想要设置放置位置
【发布时间】：2014-09-25 04:58:27
【问题描述】：

使用 Jquery UI 可拖动。

我在其中拖动 (#b1)thumbnail 并附加 div。但我想设置放置区域。就像我将缩略图拖动到 .box(border 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/

【问题讨论】：

标签： javascript jquery

【解决方案1】：

设置droppable像

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

【讨论】：

【解决方案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...
    }
});

您可以使用接受功能尝试此操作。 jQuery drag and drop - checking for a drop outside a droppable

【讨论】：

【解决方案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>

【讨论】：