Drag and Drop from image onto another image - javascript

I wanted to drag and drop image onto another image.
I cannot figure it out.. I want to drag icons image, onto droppable briefcase and the icons will stay there.. my codes.. I want the icons image to be onto briefcase image not outside of briefcase image.
Javascript:
$(function() {
$("#dragIcons img").draggable({
revert: "invalid",
refreshPositions: true,
drag: function(event, ui) {
ui.helper.addClass("draggable");
},
stop: function(event, ui) {
ui.helper.removeClass("draggable");
var image = this.src.split("/")[this.src.split("/").length - 1];
if ($.ui.ddmanager.drop(ui.helper.data("draggable"), event)) {
alert(image + " dropped.");
} else {
alert(image + " not dropped.");
}
}
});
$("#briefcase").droppable({
drop: function(event, ui) {
if ($("#briefcase img").length == 0) {
$("#briefcase").html("");
}
ui.draggable.addClass("dropped");
$("#briefcase").append(ui.draggable);
}
});
});
HTML:
<div id="dragIcons">
<img src="assets/img/gebiz.png">
<img src="assets/img/b2b.png">
</div>
<div id="briefcase">
<img width="600px" height="auto" src="assets/img/briefcase.svg">
</div>
CSS:
.draggable {
filter: alpha(opacity=100);
opacity: 1.0;
}
.dropped {
position: static !important;
}
#dragIcons {
border: 2px solid #ccc;
padding: 5px;
min-height: 100px;
width: 430px;
}
#briefcase {
border: 5px solid #ccc;
padding: 5px;
height: auto;
width: 600px;
margin-left: auto;
margin-right: auto;
}

Remove the <img> tag in the #briefcase div. Instead, make the background of the div as the image and make its position absolute.
Here's the JSFiddle - you'll have to fix the CSS positioning of the icons, but the main idea is there.

Related

Resizing by mouse the rest of images in a row after resizing a one, and keep ratio

I am using jQuery ui Resizable
After the resizing, all images should update both: their height and their width. But for the images that are not actually resized by a user, only the height is being updated. So the images are getting distorted. How to improve my code to maintain the ratio of all images while resizing?
* {
margin: 0;
padding: 0;
}
.outer {
border: red dashed 2px;
position: relative;
}
.ui-wrapper, .member {
display: inline-block;
object-fit: cover;
}
.member, .ui-wrapper {
width:auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="outer">
<img class="res image member" src="https://via.placeholder.com/150x50" alt="" />
<img class="res image member" src="https://via.placeholder.com/100x50" alt="" />
<img class="res image member" src="https://via.placeholder.com/100x50" alt="" />
</div>
<script>
$(".res").resizable({
aspectRatio: true,
ghost: true,
stop: function( event, ui) {
height=ui.size.height;
$(".ui-wrapper, .member").height(height + "px");
}});
</script>
EDIT
Code Snippet doesn't work, so I add a screenshot before and after the resizing:
After the resizing of the middle image:
EDIT2
And a demo:
https://codepen.io/trzczy/pen/PozyVjV
* {
margin: 0;
padding: 0;
}
.outer {
border: red dashed 2px;
}
.ui-wrapper, .member {
display: inline-block;
vertical-align: top;
}
js:
$(".res").resizable({
aspectRatio: true,
// ghost: true,
stop: function(event, ui) {
height=ui.size.height;
// $(".ui-wrapper, .member").height(height + "px");
$(".ui-wrapper, .member").each(function() {
ratio = height / $(this).height();
console.log(parseInt($(this).height() * ratio, 10));
$(this).css("height", parseInt($(this).height() * ratio, 10));
$(this).css("width", parseInt($(this).width() * ratio, 10));
});
}
});
demo

How removing dragged element only if it has a certain class?

I want to remove a dragged element, but it should only be removed when it doesn't have the class "nodrop".
here's my current code it removes all elements wheter i included an if function:
$(".löschen").droppable({
drop: function(event, ui) {
if (!$(this).hasClass("nodrop")){
ui.draggable.remove();
findTotal();
}
}});
I don't have any plan what I've done wrong...
You get the current drop container (.löschen) with $(this). With $(ui.draggable) you get the dropped element with class nodrop.
$(".draggable").draggable();
$(".löschen").droppable({
drop: function(event, ui) {
var $dropContainer = $(this);
var $dragContainer = $(ui.draggable)
console.log($dropContainer, $dragContainer);
if (!$dragContainer.hasClass("nodrop")){
$dragContainer.remove();
}
}});
.draggable {
width: 100px;
height: 100px;
}
.drop {
background-color: green;
}
.nodrop {
background-color: red;
}
.löschen {
width: 200px;
height: 200px;
background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="draggable nodrop">NO DROP</div>
<div class="draggable drop">DROP</div>
<div class="löschen">TRASH</div>

how to make responsive drag and drop absolute positioning?

I'm making a dragNdrop web app using JqueryUI. the problem is it's not responsive. Can someone help me with this?
heres my js code
$(document).ready(function() {
$(".draggable").draggable({
helper: "clone",
cursor: 'move'
});
$("#dropzone").droppable({
drop: function (event, ui) {
var canvas = $(this);
if (!ui.draggable.hasClass('object')) {
var canvasElement = ui.helper.clone();
canvasElement.addClass('object');
canvas.find("div").removeClass('activeElement');
canvasElement.addClass('activeElement');
canvasElement.removeClass('draggable ui-draggable ui-draggable-handle ui-draggable-dragging');
canvas.append(canvasElement);
canvasElement.css({
left: (ui.position.left),
top: (ui.position.top),
position: 'absolute',
zIndex: 10
});
canvasElement.draggable({
cursor: 'move',
containment: '#dropzone'
});
}
}
});
im using absolute positioning. how can i make this responsive?
I'm not sure, but I think your issue is with the absolute positioning inside of an element, when that element does not have relative positioning. Consider the following:
<div style="position: relative; width: 200px; height: 200px; background: #ccc;">
<div style="position: absolute; left: 75; top: 90; background: #fff;">Hello World</div>
</div>
The absolute positioning inside of the relative will place the child 75 pixels from the left of the parent, and 90 pixels from the top of the parent. If the parent is not relative, the child would appear 75 picels from the left of the edge of the document and 90 pixels from the top of the document (or the next parent that has relative positioning).
Applying this to your code, you may wish to use something like this: https://jsfiddle.net/Twisty/zzv5gdg2/
HTML
<div id="content">
<div id="element">
<div class="draggable ui-widget-content">
<p>Drag me</p>
</div>
</div>
<div id="dropzone" class="ui-widget-header"></div>
</div>
CSS
.draggable {
width: 90px;
height: 90px;
padding: 0.5em;
float: left;
margin: 10px 10px 10px 0;
}
#dropzone {
width: 200px;
height: 200px;
padding: 0.5em;
float: left;
margin: 10px;
position: relative
}
jQuery
$(function() {
$(".draggable").draggable({
helper: "clone",
cursor: 'move'
});
$("#dropzone").droppable({
drop: function(event, ui) {
var canvas = $(this);
if (!ui.draggable.hasClass('object')) {
var canvasElement = ui.helper.clone();
canvasElement.addClass('object');
canvas.find("div").removeClass('activeElement');
canvasElement.addClass('activeElement');
canvasElement.removeClass('draggable ui-draggable ui-draggable-handle ui-draggable-dragging');
canvas.append(canvasElement);
var off = canvas.position();
var canElOff = {
left: ui.position.left - off.left,
top: ui.position.top - off.top
};
canvasElement.css({
left: canElOff.left,
top: canElOff.top,
position: 'absolute',
zIndex: 10
});
canvasElement.draggable({
cursor: 'move',
containment: '#dropzone'
});
}
}
});
});
Again, it's not clear from your post what you are trying to accomplish or what is meant by "responsive". If you'd like, edit your post and provide a better example or further clarity of the issue.

jquery-ui : drop&drag inventory with stackable items

Hello everyone,
I'm building a drop&drag inventory panel for my webgame, but I was unable to make it work with stackable elements. I have simplified the whole inventory so that it's less confusing.
FIrst off, let me explain how do I expect it to work:
Every .item element can be dropped on any free .inv_slot.
If I try to drop an .item element on another .item that does not contain class .stackable, it will simply activate the draggable's revert() function.
if I try to drop the .item element on an .item that does have the .stackable class,
it will only remove the clone/helper. (Later on I will addd an function that only increases the items stack size.)
Now what's wrong with the below example :
in case an .item accidentally dropped on border or between two .inv_slotslots, the Revert animation is not activated. It does work however, while dropping the .item element outside the #panel.
Also if I accidentally dropped an .item between two .inv_slot elements, it will behave as if the .item was dropped on a .stackable item. So it will remove the clone instead of reverting back to it's prev. position. (Most likely an issue with the selector in drop: method)
If I drop a .stackable item over another .stackable item, it does not refresh the cursor. It seems to be stuck in the drag mode which activates the "pointer" cursor.
Now here's the (partialy working) example:
$(document).ready(function() {
//var prev_el = '';
var item_isStackable = "";
$( ".item").draggable({
scroll: true,
revert: function(isValidEl)
{
if(isValidEl)
{
return false;
}else{
return true;
}
},
helper: "clone",
cursor: "pointer",
stack: false,
zIndex: 27,
drag: function(event, ui)
{
item_isStackable = $(this).hasClass("stackable");
},
});
$( ".inv_slot" ).droppable({
accept: ".item",
drop: function( event, ui ) {
var item = $(this).find(".item");
if(item.length == 0) /// See if there any items already in the currently selected inventory slot //
{
console.log("Inserting");
ui.draggable.detach().appendTo($(this)); // if none, insert the item into athe free slot ///
}
else if(item_isStackable == true && item.hasClass("stackable")){
console.log("Increasing ");
ui.draggable.detach(); /// If yes, just destroy the clone ///
}else{
console.log("reverting back");
// in case it's not .inv_slot , revert the item back to it's previous position //
ui.draggable.animate(ui.draggable.data().origPosition,"slow");
}
}
});
});
#panel
{
width: 340px;
height: 44px;
border: 1px solid #000;
padding: 4px;
}
.inv_slot
{
z-index: 22;
position: relative;
width: 40px;
height: 40px;
border: 1px solid red;
float: left;
}
.inv_slot .slot_pos{
z-index: 24;
position: absolute;
margin-left: 50%;
left: -4px; top: 2px;
}
.item
{
position: relative;
z-index: 25;
margin: 4px;
width: 30px;
height: 30px;
border: 1px solid blue;
}
.item.stackable
{
border: 1px solid green;
}
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>
<div id="panel">
<div class="inv_slot">
<div class="item stackable" ></div>
<span class="slot_pos">0</span>
</div>
<div class="inv_slot">
<div class="item"> </div>
<span class="slot_pos">1</span>
</div>
<div class="inv_slot">
<div class="item stackable"> </div>
<span class="slot_pos">2</span>
</div>
<div class="inv_slot"><span class="slot_pos">3</span> </div>
<div class="inv_slot"><span class="slot_pos">4</span> </div>
<div class="inv_slot"><span class="slot_pos">5</span> </div>
<div class="inv_slot"><span class="slot_pos">6</span> </div>
<div class="inv_slot"><span class="slot_pos">7</span> </div>
</div>
I have spent couple of hours without any progress , so I'd really appreciate if someone could help me out with this one.
Thanks in advance,
Alex.
What's happening is that when you drag a box onto a border next to it, it deletes itself because it tries to stack itself. You need to change the second part of your if statement:
else if(item_isStackable == true && item.hasClass("stackable") && ui.draggable.filter(function() { var d = this; return item.filter(function() { return d == this; }).length > 0; }).length === 0)
To fix the cursor pointer problem:
.item
{
position: relative;
z-index: 25;
margin: 4px;
width: 30px;
height: 30px;
border: 1px solid blue;
cursor: default !important; /* Add this property. */
}
Fiddle.

jQuery drag and resize

I am using jQueryUI Draggable and Resizable for re-size and drag of a div. It gives me some strange behavior like on re-size it jumps outside of container how can I fix it. Any help should be appreciated.
HTML:-
<div class="paper-area" id="paper_area"></div>
<div class="upload-logo drag">Upload Logo</div>
JS:-
$(".drag").draggable({
containment: ".paper-area",
start: function(e, ui) {
$(this).css({
// position: "relative",
});
},
stop: function(e, ui) {
containment: ".paper-area",
$(this).css({
// position: "relative",
});
},
}).resizable({
containment: ".paper-area",
start: function(e, ui) {
// alert($(".paper-area").width());
containment: ".paper-area",
$(this).css({
// position: "relative",
});
},
stop: function(e, ui) {
containment: ".paper-area",
$(this).css({
//position: "relative",
});
}
});
CSS:-
.paper-area {
border: 1px solid #E4E3E3;
height: 290px;
margin: 48px auto 0;
width: 400px;
}
.upload-logo {
background: none repeat scroll 0 0 #626262;
color: #7B7B7B;
height: 98px;
margin: 0 auto;
text-shadow: 1px 1px 2px #FFFFFF;
width: 99px;
}
JSFiddle
There were two major problems (see updated fiddle: http://jsfiddle.net/BPQQN/7/):
-the containment area did not actually contain the grey rectangle. To fix this, I changed the html to:
<div class="paper-area" id="paper_area">
<div class="upload-logo drag">Upload Logo</div>
</div>
-the grey rectangle jumped around on drag start because it had margin: 0 auto; Deleted the margin and it worked.
The current state of the fiddle is probably not what you were trying to achieve. What should be the final result?
http://jsfiddle.net/BPQQN/8/
html :
<div class="paper-area" id="paper_area">
<div class="upload-logo drag">Upload Logo</div>
</div>
css:
.upload-logo {
position:absolute;

Categories

Resources