Question

我编写了下面的代码来生成一个GUI来对一些数据进行排序，它运行得很好，但是，当我在输出字段（topSlot或bottomSlot）中预加载一些数据时，我希望应用drop事件（并应用条纹效果））。

代码的工作原理：

将元素从右列拖到顶部或底部div
当放入顶部div时，右列中的元素会在顶部获得一个条带，并且禁止再次放入顶部div（当元素被放入底部div时也是如此）
要将元素返回到右列，只需将其拖出新容器

渴望得到答案。

感恩，

的jsfiddle
https://jsfiddle.net/xfhvdz5g/1/

HTML：

<div id="wrapper">
    <div id="left">
        <div id="top">
            top
            <div id="topSlot" half="top">
                <div id="test1"><h2>test1</h2></div>
                <div id="test2"><h2>test2</h2></div>
            </div>
        </div>
        <div id="bottom">
            bottom
            <div id="bottomSlot" half="bottom">
                <div id="test2"><h2>test2</h2></div>
                <div id="test3"><h2>test3</h2></div>
            </div>
        </div>
    </div>
    <div id="right">
        right
        <div id="elements">
            <div id="test1"><h2>test1</h2></div>
            <div id="test2"><h2>test2</h2></div>
            <div id="test3"><h2>test3</h2></div>
            <div id="foo1"><h2>foo1</h2></div>
            <div id="foo2"><h2>foo2</h2></div>
            <div id="foo3"><h2>foo3</h2></div>
        </div>
    </div>
</div>

的CSS：

#wrapper {
  width: 500px;
  height: 500px;
  position: fixed;
  border: 2px solid #000000;
  background-color: #ffffff;
  padding: 20px;
  z-index: 10;
}

#left {
  float: left;
  width: 230px;
  height: 460px;
}

#top {
  float: left;
  width: 230px;
  height: 220px;
  border: 1px dotted #CCCCCC;
}

#bottom {
  margin-top: 20px;
  float: left;
  width: 230px;
  height: 220px;
  border: 1px dotted #CCCCCC;
}

#right {
  float: right;
  width: 200px;
  height: 460px;
  border: 1px solid #CCCCCC;
}

#topSlot, #bottomSlot
{
    min-height: 50px;
  background-color: #fffccf;
}

#elements {
  background-color: #cfffcf;
}

#elements div
{
    background-color: #CCCCCC;
    background-image: url("http://s3.amazonaws.com/spoonflower/public/design_thumbnails/0067/0133/diagonal_red_stripes_copy_shop_preview.png");
    background-position-y: 200%;
    background-size: 100% 50%;
    background-repeat: no-repeat;
}

的javascript：

$('#elements > div').each(function(i, j) {
  var oldId = $(this).attr('id');
  $(this).addClass('correct').attr('header', '0').attr('id', oldId).appendTo('#elements').draggable({
    stack: '#elements div',
    cursor: 'move',
    helper: 'clone',
    revert: 'invalid'
  })
});

$('#topSlot, #bottomSlot').droppable({
  accept: "#elements div",

  drop: function(event, ui)
  {
    var myId = $(this).attr('half');
    var element = $(ui.draggable);
    var draggableBottom = $(ui.draggable).attr('bottom');
    var draggableTop = $(ui.draggable).attr('top');


    if ((myId == "top") && (draggableTop != "1")) {
      $(ui.draggable).attr("top", "1");
      $(this).append($(ui.draggable).clone());
      $(this).find('*').attr("pos", "top");

      var draggableBottom = $(ui.draggable).attr('bottom');
      var draggableTop = $(ui.draggable).attr('top');
      console.log("draggableTop" + draggableTop);
      console.log("draggableBottom" + draggableBottom);

      if ((draggableTop == "1") && (draggableBottom == "1")) {
        $(ui.draggable).css("background-position-y", "0");
        $(ui.draggable).css("background-size", "100% 100%");
        $(ui.draggable).draggable('disable');
      } else if (draggableTop == "1") {
        $(ui.draggable).css("background-position-y", "0");
        $(ui.draggable).css("background-size", "100% 50%");
      } else {
        $(ui.draggable).css("background-position-y", "100%");
        $(ui.draggable).css("background-size", "100% 50%");
      }
    } else if ((myId == "bottom") && (draggableBottom != "1")) {
      $(ui.draggable).attr("bottom", "1");
      $(this).append($(ui.draggable).clone());
      $(this).find('*').attr("pos", "bottom");

      var draggableBottom = $(ui.draggable).attr('bottom');
      var draggableTop = $(ui.draggable).attr('top');
      console.log("draggableTop" + draggableTop);
      console.log("draggableBottom" + draggableBottom);

      if ((draggableTop == "1") && (draggableBottom == "1")) {
        $(ui.draggable).css("background-position-y", "0");
        $(ui.draggable).css("background-size", "100% 100%");
        $(ui.draggable).draggable('disable');
      } else if (draggableTop == "1") {
        $(ui.draggable).css("background-position-y", "0");
        $(ui.draggable).css("background-size", "100% 50%");
      } else {
        $(ui.draggable).css("background-position-y", "100%");
        $(ui.draggable).css("background-size", "100% 50%");
      }
    }



  }
});

$('#topSlot, #bottomSlot').sortable({
  scroll: false
}, {
  receive: function(event, ui) {
    sortableIn = 1;
    $(".ui-sortable-helper").css({
      "opacity": "1.0",
      "transform": "scale(1.0)"
    });
  },
  over: function(event, ui) {
    sortableIn = 1;
    $("#sortable").sortable({
      revert: '100'
    });
    $(".ui-sortable-helper").css({
      "opacity": "1.0",
      "transform": "scale(1.0)"
    });
  },
  out: function(event, ui) {
    sortableIn = 0;
    $("#sortable").sortable({
      revert: false
    });
    $(".ui-sortable-helper").css({
      "opacity": "0.3",
      "transform": "scale(0.8)"
    });
  },
  beforeStop: function(event, ui) {
    var pos = ui.position,
      top = pos.top,
      left = pos.left,
      item = ui.item,
      width = item.css("width"),
      height = item.css("height");

    if (sortableIn == 0) {

      ui.item.attr("style", ui.item.attr("style") + " " +
        "position: absolute; " +
        "top: " + top + "px; " +
        "height: " + height + "px; " +
        "width: " + width + "; " +
        "left: " + left + "px; ");
      ui.item.css({
        "transform": "scale(0.0)"
      }).animate({
        opacity: "0.0"
      }, '300', function() {

        var origem = $(ui.item).attr('pos');
        var elementId = $(ui.item).attr('id');

        $('#elements').find('#' + elementId).draggable('enable');


        var draggableBottom = $('#elements').find('#' + elementId).attr('bottom');
        var draggableTop = $('#elements').find('#' + elementId).attr('top');


        if (origem == "bottom" && draggableTop == "1") {
          $('#elements').find('#' + elementId).css("background-position-y", "0");
          $('#elements').find('#' + elementId).css("background-size", "100% 50%");
          $('#elements').find('#' + elementId).removeAttr("bottom");
        } else if (origem == "top" && draggableBottom == "1") {
          $('#elements').find('#' + elementId).css("background-position-y", "100%");
          $('#elements').find('#' + elementId).css("background-size", "100% 50%");
          $('#elements').find('#' + elementId).removeAttr("top");
        } else {
          $('#elements').find('#' + elementId).css("background-position-y", "200%");
          $('#elements').find('#' + elementId).removeAttr("top");
          $('#elements').find('#' + elementId).removeAttr("bottom");
        }

        $(ui.draggable).remove();

      });
    }
  }
});

preload draggable elements中的强制丢弃事件（或解决方法）

0 个答案: