CODEWITHSUNDEEP
jqueryjquery-ui
youngdero
youngdero

Reputation: 380

Jquery ui drag and drop + .resizable

I want to add .resizable() to this : https://jsfiddle.net/6aneLqu5/23/

here is where the problem lies. I can drag the image to the container. but does not change just like the jsfiddle.net demo above. To better understand, I have attached a jsfiddle with resizable function. http://jsfiddle.net/wJUHF/7/

Upvotes: 0

Views: 97

Answers (1)

Twisty
Twisty

Reputation: 30903

Consider the following.

$(function() {
  var resizeOpts = {
    handles: "all",
    autoHide: true,
  };

  function make_draggable(el, params) {
    return $(el).draggable(params);
  }

  make_draggable(".dragImg", {
    helper: "clone"
  });

  $("#dropHere").droppable({
    accept: ".dragImg",
    drop: function(e, ui) {
      var dropItem = $(ui.helper).clone();
      $(this).append(dropItem);
      var newCount = $(".img", this).length;
      dropItem.addClass("item-" + newCount);
      $("img", dropItem).addClass("imgSize-" + newCount);

      dropItem.removeClass("dragImg ui-draggable ui-draggable-dragging");

      dropItem.dblclick(function() {
        $(this).remove();
      });
      make_draggable(dropItem, {
        containment: "parent"
      });
      $("img", dropItem).resizable(resizeOpts);
    },
  });
});
#dropHere {
  width: 400px;
  height: 400px;
  border: dotted 1px black;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="dragImg"><img class="img" src="http://www.thumbshots.com/Portals/0/Images/Feature%20TS%201.jpg" /></div>

<div id="dropHere"></div>

This makes use of the length attribute of a jQuery Object to provide a count of the items.

Since the User can remove items, there is a chance for there to be an ID conflict. So maybe just using your counter is a better idea. Here is the same example with that idea.

$(function() {
  var resizeOpts = {
    handles: "all",
    autoHide: true,
  };

  var count = 0;

  function make_draggable(el, params) {
    return $(el).draggable(params);
  }

  make_draggable(".dragImg", {
    helper: "clone"
  });

  $("#dropHere").droppable({
    accept: ".dragImg",
    drop: function(e, ui) {
      var dropItem = $(ui.helper).clone();
      $(this).append(dropItem);
      var newCount = ++count;
      dropItem.addClass("item-" + newCount);
      $("img", dropItem).replaceWith("<div class='img imgSize-" + newCount + " drag_elm'>Image " + newCount + "</div>");

      dropItem.removeClass("dragImg ui-draggable ui-draggable-dragging");

      dropItem.dblclick(function() {
        $(this).remove();
      });
      make_draggable(dropItem, {
        containment: "parent"
      });
      $(".img", dropItem).resizable(resizeOpts);
    },
  });
});
#dropHere {
  width: 400px;
  height: 400px;
  border: dotted 1px black;
}

.drag_elm {
  width: 80px;
  height: 80px;
  background: aqua;
  border: 1px solid red;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="dragImg"><img class="img" src="http://www.thumbshots.com/Portals/0/Images/Feature%20TS%201.jpg" /></div>

<div id="dropHere"></div>

You can set count to 0 or to 1. It just changes how you use it later. Using ++count to increment it before using it, or assigning it to another variable. count++ would increment it after it was used.

Update

Added to the Second Snippet with .replaceWith() to change the Image into a Div.

Upvotes: 1

Related Questions