We Keep Coding

Jquery ui rotatable on zoom elements

I am using jQuery UI rotatable to rotate my div, its working fine when my div is set to 100% zoom. When I set the zoom less then 100% or greater then 100% then its not working properly.
I want it to be perfectly rotate on zoom in or zoom out my div.
I know here we need to write few lines of code to fix zoom issue.
Here what I tried
$('#target').rotatable({
angle: false,
wheelRotate: true,
rotate: function(event, ui) {
},
start: function(event, ui) {
},
stop: function(event, ui) {
},
});

Consider the following example:
https://jsfiddle.net/Twisty/q2Lgh0st/12/
HTML
<div class="slide"></div>
<div class="container">
<div id="target">Rotate me!</div>
</div>
CSS
.ui-rotatable-handle {
height: 16px;
width: 16px;
cursor: pointer;
background-size: 100%;
bottom: inherit;
left: 0;
right: 0;
top: -21px;
margin: auto;
position: absolute;
}
.container {
transform: scale(0.5);
}
#target {
width: 100px;
height: 100px;
background: red;
position: absolute;
top: 50px;
left: 200px;
}
JavaScript
$(function() {
$(".slide").slider({
min: 0,
max: 2,
step: 0.1,
value: 0.5,
slide: function(e, ui) {
console.log("Slide", ui.value);
$(".container").css("transform", "scale(" + ui.value + ")");
}
});
$('#target').rotatable({
// Callback fired on rotation start.
start: function(event, ui) {},
// Callback fired during rotation.
rotate: function(event, ui) {},
// Callback fired on rotation end.
stop: function(event, ui) {},
// Set the rotation center
});
});
In regards to the zoom, please see:
The non-standard zoom CSS property can be used to control the magnification level of an element. transform: scale() should be used instead of this property, if possible. However, unlike CSS Transforms, zoom affects the layout size of the element.
See More: https://developer.mozilla.org/en-US/docs/Web/CSS/zoom
The last bit is what was most likely throwing off your Rotatable. Switching to the transform, there is no such issue found.

Strange droppable Hover-Effect with draggable Helper

I'm testing around with jQuery draggables and droppables and have a question about the hover behaviour of droppable and clones of a draggable.
The documentation says that the draggable item has to overlap the droppable at least 50% to fire the over-event (default tolerance). This works exactly like described if I drag the item itself.
If I drag a clone of the item, the 50% rule doesn't work. In this case the clone has to overlap the droppable quite 100% if I'm dragging vertically from the top. If I'm dragging the clone from the left side, the hover-event will fire very early at 10%.
How does this come up?
$("#eins").draggable({
helper: "clone",
opacity: 0.7,
drag: function(event,ui) {
$(ui.helper).addClass("clone")
},
stop: function (event, ui) {
console.log("Dragging stoped")
}
})
$("#zwei").droppable({
classes: {"ui-droppable-hover": "draggableHover"},
tolerance: "intersect",
over: function(event, ui) {
console.log("hover")
},
drop: function (event, ui) {
console.log("dropped")
}
})
#eins, .clone {
background: coral;
height: 100px;
width: 100px;
margin: 0px;
}
#zwei {
background:lightgreen;
height:100px;
width: 100px;
margin: 0px;
}
.draggableHover {
background: rgb(230, 250, 230) !important;
}
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<div id="eins">
eins
</div>
<div id="zwei">
zwei
</div>

Solution: class="eins" intead of id="eins".

How can I save dragged & dropped elements VALUE after dropped all players (soccer manager)

i have a player soccer field and i want the user to create his own LineUp via Drag and Drop...
have a look at my fiddle: https://jsfiddle.net/ahsce0oj/2/
this is my js code and my fiddle:
$(function() {
$("#draggable2").draggable({
appendTo: "body",
cursorAt: {
cursor: "move",
top: 5,
left: 0
},
helper: function(event) {
return $("<img width='5%' src='https://d34h6ikdffho99.cloudfront.net/uploads/real_team/shirt/1174/shirt-300.svg'>");
}
});
$("#droppable2").droppable({
accept: "#draggable2",
classes: {
"ui-droppable-active": "ui-state-default"
},
drop: function(event, ui) {
$(this).find("p").html("<img width='100%' src='https://d34h6ikdffho99.cloudfront.net/uploads/real_team/shirt/1174/shirt-300.svg'>");
}
});
});
(there is only one position at the moment, just a test)
----> You have to move the Text (right side) into the rectangle (mean position of my goalkeeper)
but when i have my eleven positions and the "user" is done with his line up draft, how can I save his selection?
with IDs? or every time directly after he dropped an element?
thanks for any hints
Edit: I would be really happy for any other hints how could I delete a dropped player (--> manipulate the DOM—for example delete his shirt and write "GOALKEPPER" instead into a DIV or a <p> Element)

There's a lot of ways to accomplish your goals (pun intended, ha!) here. I will what I would do:
Working Example: https://jsfiddle.net/Twisty/54vgb8bx/4/
HTML Snippet
<section id="content">
<div id="field">
<div id="goalie" class="drop center rear">
<p>Goal Keep</p>
</div>
<div id="rightback" class="drop right mid">
<p>R. Back</p>
</div>
<div id="leftback" class="drop center mid">
<p>C. Back</p>
</div>
<div id="leftback" class="drop left mid">
<p>L. Back</p>
</div>
<div id="rightforward" class="drop right for">
<p>R. Forward</p>
</div>
<div id="leftforward" class="drop left for">
<p>L. Forward</p>
</div>
</div>
</section>
<!-- SIDBAR RIGHT -->
<aside>
<div id="item-1" data-type="shirt" class="drag">
<p>Move me into the rectangle! ! !</p>
</div>
</aside>
CSS Snippet
.drag {
float: left;
padding: 0% 1% 0%;
margin-top: 1%;
margin-right: 0%;
width: 39%;
color: white;
background-color: black;
}
.drop {
border: 2px solid white;
height: 5vw;
width: 5vw;
color: white;
font-size: 13px;
text-align: center;
}
.rear {
position: absolute;
top: 0;
}
.mid {
position: absolute;
top: 150px;
}
.for {
position: absolute;
top: 300px;
}
.right {
left: 135px;
}
.center {
left: 273px;
}
.left {
left: 403px;
}
#field span.remove:hover {
background-color: #000;
border-radius: 8px;
}
jQuery
$(function() {
$(".drag").draggable({
appendTo: "body",
cursorAt: {
cursor: "move",
top: 5,
left: 0
},
helper: function() {
var displayImage = $("<img>", {
width: "5%",
src: 'https://d34h6ikdffho99.cloudfront.net/uploads/real_team/shirt/1174/shirt-300.svg'
}).data("type", $(this).data("type"));
return displayImage;
}
});
$(".drop").droppable({
accept: ".drag",
classes: {
"ui-droppable-active": "ui-state-default"
},
drop: function(event, ui) {
var removeButton = $("<span>", {
class: "ui-icon ui-icon-circle-close remove"
});
var dropImage = $("<img>", {
width: "100%",
src: ui.helper.attr("src")
});
$(this)
.data("type", ui.helper.data("type"))
.data("title", $(this).text())
.find("p")
.html(dropImage);
removeButton.appendTo($(this).find("p")).position({
my: "left bottom",
at: "right top",
of: $(this).find("img")
});
}
});
$("#field").on("click", "span.remove", function() {
var me = $(this).parent(); // p
var parent = me.parent(); // div
var title = parent.data("title");
parent.data("type", "").html("<p>" + title + "</p>");
});
});
First you will see I adjusted the id and class attributes. This allows the drag and drop elements to have much more specific IDs, and then can be styled via CSS in a more generalized manner. I also added more positions to flush out the example of how this can help when initializing the Draggable and Droppable portion.
Second, you may notice I added a data-type attribute to our drag item. This can be a SKU or ID from a database, name of a product, whatever. We can also change the attribute to fit the data better. But this will be how we identify what the user has selected and what that have dropped it on later.
Next, we update the CSS to work the way we might need. Making use of position, I can make the #field our boundary, so that each absolute element within is positioned exactly where it should be.
Lastly, a lot of jQuery code. Not a lot of big changes to our draggables. Consider now that if you have more items, this will apply to each of them based on their class selector. When we make the helper, we tack on the data attribute so that we can tact it to the drop position.
For the drop, we want to do more.
Accept only a drag item
Append in the img
Update the product / ID data
Create a way for user to remove selection
Store the original text if item is removed
It was not clear if this should no longer be droppable, but you could easily add that in, such that you could not drop a new item onto it. But then initial drop again in the remove button.
All this happens in the drop. To avoid confusion (around $(this)), I setup the remove button click function outside of the drop.
This should be enough to get you well along. I suspect you'll make a save or complete button. In this I would advise iterating over each .drop and look for info in the data-type attribute for each as well as the id from the parent div. You can then build an object or array to send the data along to be processed.

dropping a draggable item from a div with 'overflow: scroll/auto' style applied?

Here's my fiddle: http://jsfiddle.net/challenger/u22PD/69.
Draggable and droppable are initialized this way:
$lister.find('.draggable').draggable({
stack: 'div'
});
$('#insert-editor .droppable-target').droppable({
drop: function(event, ui) {
var $this = $(this);
$this.html(ui.draggable);
}
});
It is only possible to drag .darggable item over #image-lister div. How do I drop a .draggable item onto the droppable-target?
Also how to keep the draggable item after it's been dragged-dropped to the target?

Found a solution there: jQuery Draggable and overflow issue
Changed my code to this:
$lister.find('.draggable').draggable({
scroll: false,
helper: 'clone',
start: function() {
$(this).hide();
},
stop: function() {
$(this).show()
}
});
Here's the result: http://jsfiddle.net/challenger/u22PD/91
The only thing that doesn't satisfy me is that you still can see as a draggable item goes under the hidden part of the parent division when dragged. Maybe you know how to solve this?

Remove overflow: auto; from #image-lister
Try this code:
DEMO
#image-lister {
position: relative; max-width: 1920px; min-width: 300px; margin: 0 auto;
height: 530px;
overflow: auto; /*remove this */
background: #ddd;
background: #555;
z-index: 2;
padding: 10px;
padding-bottom: 0;
}

Positioning a draggable at the parent's center

I want to position a draggable div within the divs parents center. See example here
$("#mover").draggable({
revert: true,
containment: "parent"
});
<div style="width: 100px; height: 100px;" id="joystick">
<div style="width: 10px; height: 10px" id="mover"></div><br />
</div>
Now, it works fine, but as soon as I want to position the mover at the joysticks center, the dragging doesn't work the way I want it to.
I tried positioning it giving the mover a margin: 45px 0 0 45px;, but then (because of the box-model seeing the margin as a part of the box) the dragging still only works down and right, and not up and left.
As you see, I want to create kind of a "joystick" used to steer something. Therefore, it needs to be centered but also be movable in all axis'.
Any ideas would be highly appreciated.

Here's a full working demo, you have to position the center of the joystick with position:relative;: http://jsfiddle.net/E6BQe/
HTML:
<div id="coords"> </div>
<div id="joystick">
<div id="mover"></div>
</div>
CSS:
#joystick { background-color:whitesmoke; width: 100px; height: 100px; padding:0px; }
#mover { background-color:red; position:relative; margin:0px; padding:0px; width: 10px; height: 10px; left:45px; top:45px; }
javascript:
$("#mover").draggable({
revert: true,
containment: "parent",
create: function(){
$(this).data("startLeft",parseInt($(this).css("left")));
$(this).data("startTop",parseInt($(this).css("top")));
},
drag: function(event,ui){
var rel_left = ui.position.left - parseInt($(this).data("startLeft"));
var rel_top = ui.position.top - parseInt($(this).data("startTop"));
$('#coords').text(rel_left + ", " + rel_top);
},
stop: function(){
$('#coords').html(" ");
}
});

Add the following CSS:
#joystick {position:relative}
#mover {position:absolute;top:45px;left:45px}
Working example: http://jsfiddle.net/52V6h/
The difference between this and margin is that this just sets the position, while keeping the containers the same. Changing the margin will force the #mover to always be 45px away from the box corner.