javascript - 拖放三 Angular 形

Question

我是 jquery 新手，所以我尝试从左到右放置三 Angular 形，以便它们适合三 Angular 形网格。它们只能放在右侧 div 中。这是到目前为止我得到的。棘手的是 div 看起来像三 Angular 形，但它们实际上是一个正方形。我用过JqueryUI

$(document).ready(function() {

  $(function() {
    $(".triangle-1,.triangle-2,.triangle-3,.triangle-4").draggable();
  });

  $(".up").mouseover(function() {
    $(this).css("border-bottom-color", "gray");

  });

  $(".up").mouseleave(function() {
    $(this).css("border-bottom-color", "floralwhite");
  });

  $(".up").droppable();
});

.container {
  width: 1000px;
  margin: 0 auto;
  background: #ccc;
  height: 500px;
}
.left {
  background: lightgray;
  height: 500px;
}
.triangle-1,
.triangle-2,
.triangle-3,
.triangle-4 {
  cursor: pointer;
  position: absolute;
  z-index: 10;
  width: 0;
  height: 0;
}
.triangle-1,
.triangle-2 {
  border-top: 86px solid green;
  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
}
.triangle-3,
.triangle-4 {
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 86px solid red;
}
.up,
.down {
  display: inline-block;
  width: 0;
  height: 0;
  position: absolute;
  z-index: 0;
}
.up {
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 86px solid floralwhite;
  left: 50px;
  z-index: 0;
}
.down {
  border-top: 86px solid floralwhite;
  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-xs-6 left">
      <div class="triangle-1"></div>
      <div class="triangle-2"></div>
      <div class="triangle-3"></div>
      <div class="triangle-4"></div>
      <div class="triangle-1"></div>
      <div class="triangle-3"></div>
    </div>
    <div class="col-xs-6">
      <div class="row">
        <div class="down" style="left:0">
        </div>
        <div class="up" style="left:50px">
        </div>
        <div class="down" style="left:100px">
        </div>
        <div class="up" style="left:150px">
        </div>
        <div class="down" style="left:200px">
        </div>
        <div class="up" style="left:250px">
        </div>
        <div class="down" style="left:300px">
        </div>
        <div class="up" style="left:350px">
        </div>
        <div class="down" style="left:400px">
        </div>
      </div>
    </div>
  </div>

</div>

Answer 1

我为每个 drop 使用了一个函数事件以正确地将它们放置在网格上。请参阅doDrop JS 末尾的函数及其注释，了解其工作原理的详细信息。

$(document).ready(function() {

  $(function() {
    $(".triangle-up,.triangle-down").draggable({});
    $(".down").droppable({
      drop: function(event, ui) {
        
        doDrop(event, ui);
      }
    });
    $(".up").droppable({
      drop: function(event, ui) {
        doDrop(event, ui);
      }
    });
  });

  $(".up").mouseover(function() {
    $(this).css("border-bottom-color", "gray");
  });

  $(".up").mouseleave(function() {
    $(this).css("border-bottom-color", "floralwhite");
  });
});

function doDrop(event, ui) {
  var dropElem = $(event.target);
  var dragElem = ui.draggable;
  var isUp = dragElem.hasClass("triangle-up");
  
  // Check if we're dropping a .triangle-up into a .down
  // or a .triangle-down into a .up
  // If so, we'll choose either the next or previous
  // sibling element to drop to, depending where the
  // mouse is.
  if (isUp && !dropElem.hasClass("up") ||
     !isUp && !dropElem.hasClass("down")) {
    // Get halfway point of drop element
    var dropCentreX = dropElem.offset().left + (dropElem.outerWidth() / 2);

    // Set drop element to next if more than halfway, else to previous
    if (dropCentreX < event.pageX && dropElem.next()) {
      dropElem = dropElem.next();
    } else {
      dropElem = dropElem.prev();
    }
  }

  // Append so positioning is relative to drop element.
  dropElem.append(dragElem);

  // Few positioning calculations
  var width = dropElem.outerWidth();
  var height = dropElem.outerHeight();
  var cntrLeft = (dragElem.outerWidth()/2) - width;
  var cntrTop = (isUp) ? 0 : -height;

  // Position to drag element within the drop element
  dragElem.css({
    left: (cntrLeft) + "px",
    top: (cntrTop) + "px",
    zIndex: "1001"
  });
}

.container {
  width: 1000px;
  margin: 0 auto;
  background: #ccc;
  height: 500px;
}
.left {
  background: lightgray;
  height: 100px;
}
.triangle-down,
.triangle-up {
  cursor: pointer;
  position: absolute;
  z-index: 10;
  width: 0;
  height: 0;
}
.triangle-down {
  border-top: 86px solid green;
  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
}
.triangle-up {
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 86px solid red;
}
.up,
.down {
  display: inline-block;
  width: 0;
  height: 0;
  position: absolute;
  z-index: 0;
}
.up {
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 86px solid floralwhite;
  left: 50px;
  z-index: 0;
}
.down {
  border-top: 86px solid floralwhite;
  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
}
.right-side {
  background-color: #999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-xs-6 left">
      <div class="triangle-down"></div>
      <div class="triangle-down"></div>
      <div class="triangle-up"></div>
      <div class="triangle-up"></div>
    </div>
    <div class="col-xs-6 right-side">
      <div class="row">
        <div class="down" style="left:0">
        </div>
        <div class="up" style="left:50px">
        </div>
        <div class="down" style="left:100px">
        </div>
        <div class="up" style="left:150px">
        </div>
        <div class="down" style="left:200px">
        </div>
        <div class="up" style="left:250px">
        </div>
        <div class="down" style="left:300px">
        </div>
        <div class="up" style="left:350px">
        </div>
        <div class="down" style="left:400px">
        </div>
      </div>
    </div>
  </div>

</div>

编辑更正 >至<在if (dropCentreX < event.pageX && dropElem.next())