Question

我是jquery的新手我想在onclick提交按钮时放在droppable中的任何内容，以显示内部被丢弃的内容，现在是内部的任何内容都会显示出来但它们在一起..我想要他们以不同的方式显示，所以我可以把我的表格向导放入步骤1,2或3 ..任何想法如何做到这一点？请指导我..

Fiddle

的Javascript

/* Drag and Drop */
$(function() {
  var countDropped = 0;
  $("#dragIcons img").draggable({
    revert: "invalid",
    refreshPositions: true,
    cursor: "move",
    cursorAt: {
      top: 56,
      left: 56
    },
    drag: function(event, ui) {
      ui.helper.removeClass("end-draggable");
      ui.helper.addClass("draggable");
    },
    stop: function(event, ui) {
      ui.helper.addClass("end-draggable");
      ui.helper.removeClass("draggable");
    }
  });
  $('#reset').click(function(e) {
    e.preventDefault();
    var dropped_icon = $('#briefcase-droppable')
      .children()
      .detach()
      .removeClass('dropped end-draggable')
      .removeAttr('style')
      .css('position', 'relative');

     $('#dragIcons').append(dropped_icon);
     $('#briefcase').css('background', 'url("http://simpleicon.com/wp-content/uploads/Briefcase-12.png")');
  });
  $("#briefcase-full").droppable({
    greedy: true,
    tolerance: 'touch',
    drop: function(event, ui) {
      var id = ui.draggable.attr("id");
      if ($("#briefcase").length == 0) {
        $("#briefcase-droppable").html("");
      }
      countDropped++;
     ui.draggable.addClass("dropped");
      $("#briefcase-droppable").append(ui.draggable);
    }
  });
  $("#submit").click(function() {
    var iconsid = " "
    $("#briefcase-droppable").children(".icons").each(function() {
    iconsid += $(this).attr("id");
    });
    $("#listicon").html(iconsid);
  });
});

Answer 1

像这样替换脚本它将起作用

/* Drag and Drop */
$(function() {
  var countDropped = 0;
  $("#dragIcons img").draggable({
    revert: "invalid",
    refreshPositions: true,
    cursor: "move",
    cursorAt: {
      top: 56,
      left: 56
    },
    drag: function(event, ui) {
      ui.helper.removeClass("end-draggable");
      ui.helper.addClass("draggable");
    },
    stop: function(event, ui) {
      ui.helper.addClass("end-draggable");
      ui.helper.removeClass("draggable");
    }
  });
  $('#reset').click(function(e) {
    e.preventDefault();
    var dropped_icon = $('#briefcase-droppable')
      .children()
      .detach()
      .removeClass('dropped end-draggable')
      .removeAttr('style')
      .css('position', 'relative');

    $('#dragIcons').append(dropped_icon);
    $('#briefcase').css('background', 'url("http://simpleicon.com/wp-content/uploads/Briefcase-12.png")');
  });
  $("#briefcase-full").droppable({
    greedy: true,
    tolerance: 'touch',
    drop: function(event, ui) {
      var id = ui.draggable.attr("id");
      if ($("#briefcase").length == 0) {
        $("#briefcase-droppable").html("");
      }
      countDropped++;
      ui.draggable.addClass("dropped");
      $("#briefcase-droppable").append(ui.draggable);
    }
  });

    $("#submit").click(function() { 
        $("#dragIcons").append($("#briefcase-droppable").html());
        $("#dragIcons").find('br').remove();
        $("#dragIcons img").after("<br />");    
        $("#briefcase-droppable").html("");
    });



});

拖放表单向导的显示div

1 个答案: