Question

我有一个两个可拖动的div。我在drop函数中写了一个javascript。当我拖动第一个可拖动的div并单击第一个拖动div时，它调用第二个可拖动的onclick函数。

$(function() {
  $(".draggable1").draggable({
    cursor: "crosshair"
  });


  $("#droppable").droppable({
    drop: function(event, ui) {
      $("#close1").show();
      $('#first').on('click', function(event) {
        // alert("hi");
        $("#formnew1").show();
        event.preventDefault();
      });
      $('#close1').on('click', function(event) {
        // alert("hi");
        $("#formnew1").hide();
        location.reload();

        event.preventDefault();
      });

    }
  });
});
$(function() {
  $(".draggable2").draggable({
    cursor: "crosshair"
  });


  $("#droppable").droppable({
    drop: function(event, ui) {
      $("#close2").show();
      $('#second').on('click', function(event) {
        // alert("hi");
        $("#formnew2").show();
        event.preventDefault();
      });
      $('#close2').on('click', function(event) {
        // alert("hi");
        $("#formnew2").hide();
        location.reload();

        event.preventDefault();
      });

    }
  });
});

https://jsfiddle.net/7078p7kc/9/

Answer 1

您拨打$("#droppable").droppable两次，因此，只有最后一个适用。你应该像下面这样组合它们：

$(function() {

  $(".draggable").draggable({
    cursor: "crosshair"
  });

  $("#droppable").droppable({
    drop: function(event, ui) {

      var droppedElement = ui.draggable;
      var formnew = droppedElement.find(".formnew");
      var closeButton = droppedElement.find('.close');

      droppedElement.on('click', function(event) {
        formnew.show();
        event.preventDefault();
      });

      closeButton.show();
      closeButton.on('click', function(event) {
        formnew.hide();
        location.reload();
        event.preventDefault();
      });

    }
  });
});

Online Demo (jsFiddle)

draggable和droppable中的表单显示校正错误？

1 个答案: