Jquery Draggable UI | Change image size when it is dragged into container

Question

I am using the Jquery Draggable UI: http://jqueryui.com/draggable/

I'm working on a project where I can drag four images into 4 different containers. What I want to do is change the size of the image to the size of the container that it is dropped into. The image should revert back to its original size when it is taken outside of the container.

EXAMPLE: http://jsfiddle.net/W8yaz/546/

Here is my code as of right now:

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

The answer is here: 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! */
    }
});