Hey there,i'm creating a simple inventory using jQuery droppable. For now, it's like :
$(document).ready(function() {
$( ".weapon, .helmet" ).draggable({ revert: "invalid", cursor: "move" });
$( "#weapon_spot" ).droppable({accept: ".weapon"});
$( "#helmet_spot" ).droppable({accept: ".helmet"});
// make inventory slots droppable as well
$( ".inv_slot" ).droppable({accept: ".weapon"});
});
I'm kinda new to JQuery and have some trouble setting an image to be aligned inside a certain div. Everything(.weapon, .helmet etc) is a div. Inside them, there can be images. The divs are 70x70 and the images are of that size as well.
The css is like :
.inv_slot, #weapon_spot, #helmet_spot {
width: 70px;
padding: 10px;
height: 70px;
margin: 10px;
border: 1px solid black;
float: left;
text-align: center;
}
and the image inside a div is like :
<div class='inv_slot'>
<img class='weapon' src= "..." />
</div>
My problem is that when i drop an image to another div, it's not aligned in the center of the div, it's not locked and it can be moved inside it. It seems that i can use Drag.Move somehow to do that, but i can't find some good resource explaining that. Could you please help ? :)
EDIT : I have created a demo at http://jsfiddle.net/kzuRn/2/
Add a drop callback to the droppables and apply the style changes necessary. Because right now the item is still positioned absolutely it will not recognize your center css.
Something like this: WRONG (see below)
drop: function(ev, ui) {
$(this).css({position: 'static'})
}
I updated the fiddle. I was wrong before. this is the droppable, and ui.draggable is the draggable.
drop: function(ev, ui) {
$(this).append(ui.draggable.css('position','static'))
}
Related
Using jQuery UI, I've just set up a simple test with draggable and droppable
HTML:
<div>
<img src="img/2.jpg" alt="Donut" id="a" class="drag"><span id="4" class="drop" >Eclair</span>
</div>
<div>
<img src="img/3.jpg" alt="Eclair" id="b" class="drag"><span id="3" class="drop">Donut</span>
</div>
I am trying to drag the first image and drop into the related span.Along with this if i drag and drop first image at id="4" it should revert back to its original position.Similarly when i drag and drop second image at id="3" it should revert back to its original position.
script:
$(function () {
$("#a").draggable({
revert: "valid",
});
$("#b").draggable({
revert: "invalid",
});
$(".drop").droppable({
accept: '.drop',
});
});
I can drag the image but could not drop it in a correct position.What i am doing wrong?
css:
.drag,.drop{
width:130px !important;
height: 130px !important;
border:2px solid !important;
margin-top:10px !important;
margin-left: 15% !important;
}
.drop{
float: right !important;
margin-right: 30% !important;
}
https://jsfiddle.net/jjewhwLt/
You need to style the elements a bit different, add the draggable() to the .drag class and you can then append the droppable() to the .drag elements. I've also added data-id to both drag and drop elements to be able to match them. I hope this is what you're looking for:
Updated FIDDLE.
$(".drag").draggable({
revert: 'invalid'
});
$(".drop").droppable({
accept: function(drag) {
var drop_id = $(this).attr('data-id');
var drag_id = $(drag).attr('data-id');
return drop_id === drag_id;
}
});
I had a bit of trouble understanding the question here, but i'll give it my best shot at explaining what I think you're trying to achieve.
I'd recommend in the future to start naming out what you're trying to do clearly so that you yourself can understand it while you're working. Stuff like "A" and "B", "3" and "4" etc. will get confusing very very fast with what you're working on.
What I took from this was that you are trying to get each container to accept it's corresponding image. Here's a cleaned up version of your jsfiddle: https://jsfiddle.net/8hr3vf3L/
I've separated out the images + drop areas in the HTML first and replaced the images that were broken with placeholders:
<div class="images">
<img src="http://placehold.it/120?text=donut" alt="Donut" id="donut" class="drag">
<img src="http://placehold.it/120?text=eclair" alt="Eclair" id="eclair" class="drag">
</div>
<div class="drop-areas">
<div class="drop-area" id="eclairArea">Eclair</div>
<div class="drop-area" id="donutArea">Donut</div>
</div>
Then cleaned up the CSS a little to make it a bit more generic:
.drop-areas {
margin-top: 40px;
}
.drop-area,
.drag {
display: inline-block;
width: 120px;
height: 120px;
border: 2px solid black;
margin-right: 20px;
}
.drag { border: none; }
Then finally your JS, which I hope makes more sense for you now. revert within a draggable function when named invalid will send the square back to where it was if it isn't in an area where it's accepted, which is explained by the droppable functions, which in this case I've separated out to make a little more sense to you, but you could I assume, make this programmatically check which image is being dropped in. As you can see, #eclairArea is set up to only accept the #eclair and vice-versa.
$(function () {
$(".drag").draggable({
revert: "invalid",
});
$("#eclairArea").droppable({
accept: '#eclair'
});
$("#donutArea").droppable({
accept: '#donut'
});
});
I have issue with jQuery sortable.
Here is live example: JSFiddle
HTML:
<div class="a">
<div class="b">
a<br>
b<br>
c<br>
d<br>
e<br>
f<br>
g<br>
h<br>
i<br>
j<br>
k<br>
l<br>
m<br>
n<br>
o<br>
</div>
</div>
JS:
$(function(){
$('.a').sortable();
});
CSS:
.b {
border: 1px solid;
width: 100px;
height: 100px;
overflow-y: scroll;
overflow-x: hidden;
text-align: center;
}
In this case I have div with scroll. I scroll to the end of the div and I try to sort element using drag&drop. After this action, scroll in div jumps to beginning of this div. How I can "remember" position of scroll and "revert" it after sortable?
You need to save the scroll position and then reapply it when you stop moving the object.
JSFIDDLE: JSFIDDLE
$(function(){
var scrollTop = 0;
$('.a').sortable({
start: function(event, ui){
scrollTop = ui.item.scrollTop();
},
stop: function(event, ui){
ui.item.scrollTop(scrollTop);
}
});
});
You should use the sortable() method on the inner <div id="b"> and put every element you want to sort inside a <div> tag so they can be treated as DOM elements.
Here's a working solution JSFiddle
You might want to check THIS topic.
I'm having this problem to solve for weeks now and really need help.
I have this system where a user selects a template with 2 types of areas. One for inserting images and one for inserting text.
Each template may come with numerous areas to insert images and each image area is just a div with it's own dimensions [width px - height px] within a limited area of 800px - 650px.
I will call this div to receive images div.img
Inside that div.img theres an input type="file" and throw jquery.form.js plugin I'm able to insert a new image into it.
I will call the inserted image new.img
This new.img comes wrapped in a div div.newImg because I had to have a button to delete the image on top of the image itself.
I'm using jquery ui draggable and resizable so the div.newImg may be resized and dragged inside of div.img.
Here are the different elements: div.img -> div.newImg -> new.img + button delete
HTML
<div class="child" style="z-index: 70; position: absolute; top: 0px; left: 0px; width: 800px; height: 172px; cursor: default; background-color: rgba(254, 202, 64, 0.701961);" alt="reset">
<div class="imgh ui-resizable ui-draggable" alt="reset3" style="height: 100%; width: 204px;">
<img src="###" style="width:inherit; height:inherit; min-width:50px; min-height:50px;" class="img_set">
<div class="close"><i class="icon-remove-sign"></i></div>
</div>
</div>
JQUERY
$('.imgh').resizable({ containment: $(this).closest('.child') });
$('.imgh').draggable({ containment: $(this).closest('.child'), scroll: true, snap: true, snapTolerance: 5 });
This is what I've manage to approach so far but doesn't help me at all
if($('.child').width() > $('.child').height()){
$('.imgh').height('100%');
$('.imgh').width($('.imgh img').width());
}else{
$('.imgh').width('100%');
$('.imgh').height($('.imgh img').height());
}
I've managed to have the img.img_set have the same dimensions as it's parent by having style="width:inherit; height:inherit;".
What I need is a way for the div.imgh to have the same dimensions as it's inner img.img_set. Like a reversed inherit.
UPDATE
This code does what I want but my problem is that everytime I resize it comes back to what I've defined in the initialization:
if($('.child').width() > $('.child').height()){
$('.imgh').height('100%');
$('.imgh').width('auto');
}else{
$('.imgh').width('100%');
$('.imgh').height('auto');
}
if($('.imgh').width() > $('.imgh img').width()){
$('.imgh').width($('.imgh img').width());
}
Is there a way for this to only happen once to each div.imgh?
You could use .bind() to resize it it every time something changes...
$('.imgh').bind('resize', FullWidthHeight); //Note: check the 'resize' event is relevant to imgh
function FullWidthHeight() {
$('.imgh').css('height', img.img_set.height());
$('.imgh').css('width', img.img_set.width());
}
By setting droppable widget's greedy to true, only the top-most element should respond to a drop event. There's really no complexity here but I just cannot get it to work. And this is all I have so not much to work on:
CSS:
.page{
position: absolute;
width: 150px;
height: 150px;
left: 0px;
top: 0px;
text-align: center;
background: #F0FFFF;
border: 1px solid #89B;
}
HTML:
<div class = 'page' id = 'page1'> page1 </div>
<div class = 'page' id = 'page2'> page2 </div>
<div class = 'page' id = 'page3'> page3 </div>
JS:
document.ready = function(){
$('.page').draggable()
$('.page').droppable({
greedy: true,
drop: function( event, ui ){
console.log( 'assert drop once')
}
})
}
what's happening right now is that all the dropped on elements are responding to the drop event. Since there's so little code to hold on to, I have no idea how to diagnose this.
Reading the documentation for the greedy property I'm not sure I understand the same as you:
By default, when an element is dropped on nested droppables, each droppable will receive the element. However, by setting this option to true, any parent droppables will not receive the element.
For me it means if you have a large div droppable which contains another smaller div droppable then if you drop an element in the small one only the small one will receive the event.
Check this demo to understand what I'm explaining : http://jquery-ui.googlecode.com/svn/tags/1.6rc4/demos/droppable/greedy.html
i want to make a draggable image in jquery.
first of all my experience with jquery is 0. having said that let me describe what i want to achieve. i have fixed width/height div. and the image contained inside the div is large in size. so i want the image to be draggable inside that div so that the user can see the entire image.
can someone help. pls be a little elaborate about the procedure considering my jquery fluency.
You can use the following;
$(function() {
$("#draggable").draggable();
});
.container {
margin-top: 50px;
cursor: move;
}
#screen {
overflow: hidden;
width: 200px;
height: 200px;
clear: both;
border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="container">
<div id="screen">
<img src="https://picsum.photos/200/200" class="drag-image" id="draggable" />
</div>
</div>
You want the jQuery Draggable UI tool. The code for this, as with all jQuery, is very simple:
$(document).ready(function(){
$("#draggable").draggable();
});
Will create a draggable object from a standard html tag (the IMG in your case). And for limiting it's mobility to a specific region, you would look into its containment option.
Update: "What is '#draggable' and 'ready'"?
'#draggable' represents the element that you want to be able to drag. The hash (#) symbol represents an ID. When you add your image tags, may give give it an id like the following:
<img src="myimage.jpg" id="draggable" />
That will make the javascript above make your image draggable, because it has the '#draggable' id that the jQuery is looking for.
'.ready()' is the method that is automagically raised by your browser once the page is finished loading. Developers are encouraged by the jQuery group to place all jQuery code within this method to ensure all of the elements on the page are completely loaded prior to any jQuery code attempts to manipulate them.
to limit to a region for this example, containment is not much of a help.
I have implemented this for vertical only scroll, needs enhancement for horizontal limit:
stop: function(event, ui) {
var helper = ui.helper, pos = ui.position;
var h = -(helper.outerHeight() - $(helper).parent().outerHeight());
if (pos.top >= 0) {
helper.animate({ top: 0 });
} else if (pos.top <= h) {
helper.animate({ top: h });
}
}
$('#dragMe').draggable({ containment: 'body' });
This code will make it posible to drag the div with the ID of dragMe where ever you want inside the body of the document. You can also write a class or id as containment.
$('#dragMe').draggable({ containment: '#container' });
This code will make the div dragMe able to be draggable inside of the id container.
Hope this helps otherwise you should be able to find your answer here http://jqueryui.com/demos/draggable/
Expanding on the answer from PH. this will provide an elastic bounceback whenever the image is dragged to the point the underlying container is exposed:
stop: function(event, ui) {
var helper = ui.helper, pos = ui.position;
var h = -(helper.outerHeight() - $(helper).parent().outerHeight());
var w = -(helper.outerWidth() - $(helper).parent().outerWidth());
if (pos.top <= h) {
helper.animate({ top: h });
} else if (pos.top > 0) {
helper.animate({ top: 0 });
}
if (pos.left <= w) {
helper.animate({ left: w });
} else if (pos.left > 0) {
helper.animate({ left: 0 });
}
}