javascript - Jquery 可拖动用户界面 |将图像拖入容器时更改图像大小

Question

我正在使用 Jquery Draggable UI:http://jqueryui.com/draggable/

我正在做一个元素，我可以将四张图片拖到 4 个不同的容器中。我想要做的是将图像的大小更改为它放入的容器的大小。当图像从容器中取出时，图像应该恢复到原来的大小。

示例:http://jsfiddle.net/W8yaz/546/

这是我目前的代码:

HTML

<div class="bordered-boxes">
  <ul>
    <li class="squaredotted">
      <div style="width:205px; height: 205px; border: 1px dotted #eee;" class='snappable'>

      </div>
    </li>

    <li class="squaredotted">
      <div class="" style="width:175px; height: 175px; border: 1px dotted #eee;">

      </div>
    </li>

    <li class="squaredotted">
      <div class="" style="width:145px; height: 145px; border: 1px dotted #eee;">

      </div>
    </li>

    <li class="squaredotted">
      <div class="" style="width:110px; height: 110px; border: 1px dotted #eee;">

      </div>
    </li>
  </ul>

  <div class="" style="position: absolute; text-align: left; top: 50%; transform: translateY(-50%); left: 760px; font-weight: bold; font-size: 15px; opacity: .7; font-style: italic;">
    <p>Least
      <br />Important</p>
  </div>

  <div class="" style="position: absolute; text-align: left; top: 50%; transform: translateY(-50%); left: -95px; font-weight: bold; font-size: 15px; opacity: .7; font-style: italic;">
    <p>Most
      <br />Important</p>
  </div>
</div>

<div class="card-wrapper animation">

  <ul>
    <li class="square">
      <div class="container">
        <div class="card" id="incapacitation-icon">
          <div class="front">
            <img src="assets/icons/icon-incapacitation.svg" width="100%" />

            <div class="more-info">
              <img src="assets/icon-info.svg" />
            </div>
          </div>

          <div class="back">
            <section>
              <h4>Incapacitation</h4>

              <p>Confining Dangerous People</p>
            </section>

            <div class="close-icon">
              x
            </div>
          </div>
        </div>
      </div>
    </li>

    <li class="square">
      <div class="container">
        <div class="card" id="deterrence-icon">
          <div class="front">
            <img src="assets/icons/icon-deterrence.svg" width="100%" />

            <div class="more-info">
              <img src="assets/icon-info.svg" />
            </div>
          </div>

          <div class="back">
            <section>
              <h4>Deterrence</h4>

              <p>Setting an Example</p>
            </section>

            <div class="close-icon">
              x
            </div>
          </div>
        </div>
      </div>
    </li>

    <li class="square">
      <div class="container">
        <div class="card" id="rehabilitation-icon">
          <div class="front">
            <img src="assets/icons/icon-rehabilitation.svg" width="100%" />

            <div class="more-info">
              <img src="assets/icon-info.svg" />
            </div>
          </div>

          <div class="back">
            <section>
              <h4>Rehabilitation</h4>

              <p>Breaking the Cycle of Crime</p>
            </section>

            <div class="close-icon">
              x
            </div>
          </div>
        </div>
      </div>
    </li>

    <li style="margin-right:0;" class="square">
      <div class="container">
        <div class="card" id="retribution-icon">
          <div class="front">
            <img src="assets/icons/icon-retribution.svg" width="100%" />

            <div class="more-info">
              <img src="assets/icon-info.svg" />
            </div>
          </div>

          <div class="back">
            <section>
              <h4>Retribution</h4>

              <p>An Eye for An Eye</p>
            </section>

            <div class="close-icon">
              x
            </div>
          </div>
        </div>
      </div>
    </li>

  </ul>

</div>

CSS

.card-wrapper li { 
  height: 203px;
  position: relative;
  list-style-type: none;
}

.card-wrapper .card {
  width: 100%;
  height: 100%;
  position: absolute;
    perspective:800px;
}

.card-wrapper .card div {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition-duration: 400ms;
  transition-duration: 400ms;
    z-index:10;
}

.card-wrapper .card .front {
}

.card-wrapper .card .back {
  background: #8d797a;
    z-index:0;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  border: 3px solid white;
}

.card-wrapper .card .back h4{
    font-size: 20px;
    color:#4b3839;
    margin-bottom:5px;
    font-weight: bold;
}

.card-wrapper .card .back section {
    padding: 20px;
    text-align: center;
    padding-top:30px;
}

.card-wrapper .card .back p {
    font-size: 18px;
    font-weight: 200;
    color:white;
    margin: 0px;
    line-height: 30px;
}

.card-wrapper .card.flip .front {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
    z-index:0;
}

.card-wrapper .card.flip .back {
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
    z-index:10;
}

.card-wrapper .more-info {
    font-size: 2em;
    width: 1.5em !important;
    text-align: center;
    line-height: 1.5em;
    background: #FFF;
    color: #fff;
    border-radius: 50px;
    position: absolute !important;
    top: -28px;
    right: -18px;
    height: 1.5em !important;
}

.card-wrapper .close-icon {
    font-size: 2em;
    width: 1.5em !important;
    text-align: center;
    line-height: 1.5em;
    background: #FFF;
    color: #fff;
    border-radius: 50px;
    position: absolute !important;
    top: -28px;
    right: -18px;
    height: 1.5em !important;
}

.card-wrapper .card .close-icon {
    display: none;
}

.card-wrapper .card.flip .more-info {
    display: none;
}

.card-wrapper .card.flip .close-icon {
    display: block;
}

.card-wrapper {
    position: absolute;
    width: 90%;
    left: 0;
    right: 0;
    margin: auto;
    top: 50%;
    transform: translateY(-50%);
}

.bottom-row {
    position: absolute;
    width: 60%;
    left: 0;
    right: 0;
    bottom: 70px;
    margin: auto;
}

.bottom-row li {
    list-style: none;
    width: 20% !important;
    display: inline-block;
    margin-right: 3% !important;
    height: 117px !important;
    position: relative;
}

.bottom-row .back {
    display: none;
}

.bottom-row .more-info {
    display: none;
}

.bottom-row .more-info2 {
    display: none;
}

.bordered-boxes {
    position: absolute;
    width: 75%;
    left: 0;
    right: 0;
    margin: 0 auto;
    display: none;
    top: 50%; 
    transform: translateY(-50%);
}

.bordered-boxes ul {
    display: table;
    width: 100%;
    margin: 0px;
    padding: 0px;
}

.bordered-boxes ul li {
    display: inline-block;
    vertical-align: middle;
    margin-right: 4%;
}

Javascript

$('.square').draggable({
    snap: '.squaredotted',
    snapMode: 'inner',
    snapTolerance: 25,
});

Answer 1

答案在这里: How to find out about the "snapped to" element for jQuery UI draggable elements on snap

$(".draggable").draggable({
    snap: ".snap",
    stop: function(event, ui) {
        /* Get the possible snap targets: */
        var snapped = $(this).data('draggable').snapElements;

        /* Pull out only the snap targets that are "snapping": */
        var snappedTo = $.map(snapped, function(element) {
            return element.snapping ? element.item : null;
        });

        /* Process the results in the snappedTo array! */
    }
});