javascript - Jquery Ui 可拖动想要设置放置位置

Question

使用 Jquery UI 可拖动。

我在其中拖动(#b1)缩略图并附加一个div。但我想设置放置区域。就像如果我将缩略图拖动到.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>');



      }
    });

这是我的 fiddle 代码:http://jsfiddle.net/zha4v66u/2/

Answer 1

设置可放置

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