I'm trying to figure out how to enable visitors to drag to rotate a 3D div using .draggable(). Currently the div rotates but also moves vertically and horizontally making the process touchy and unpredictable. I would like the origin of the div to stay fixed, and the "dragging" to only affect the rotation, so users can "spin" the div around to see the other sides.
here is link to the codepen: http://codepen.io/armandhammer8/pen/IiBga
$('.anime').draggable({
drag: function(event, ui){
var rotateCSS = 'rotate(' + ui.position.left + 'deg)';
$(this).css({
'transform': rotateCSS,
'-moz-transform': rotateCSS,
'-webkit-transform': rotateCSS
});
Thanks in advance!
The div element is a little house:
I want to be able to spin it around
The built in functionality of draggable is giving you the problems.
It's not so hard to get the functionality by yourself and stop using draggable.
Javascript:
var offset = 0, startX;
var elem = document.getElementById("element");
$('.draggable').on('mousedown', function (e) {
startX = e.pageX - offset;
})
.on('mouseup', function() {
startX = null;
})
.on('mousemove', function (e) {
if(startX) {
offset = e.pageX - startX;
elem.style['-webkit-transform'] = 'rotateY(' + offset + 'deg)';
}
});
demo
Related
I have draggable object in the page, and it has snap setting for the region.
<div class="drag-bound">
<div id="obj"></div>
</div>
$('#obj').draggable({
snap: ".drag-bound",
snapTolerance: 5
})
So now if $('#obj') is dragged near the border of ".drag-bound", it gets snapped there.
The problem is I want $('#obj') is snapped to the center of the ".drag-bound", too.
Is there any good idea how to make it happen?
Should I make custom code inside of drag event handler?
Is there any good and easy option inside of it?
Alright, so far from my investigation, there seems not to be a good option to accomplish my purpose.
I have made custom code inside of drag event handler like following:
fn.branding.$resizable.draggable({
snap: ".resize-bound",
snapTolerance: 5,
drag: function(event, ui) {
var ui_w = ui.helper.width();
var ui_h = ui.helper.height();
var margin = $(this).draggable("option", "snapTolerance");
/////////////////////////////////////////////////////////
// do custom snapping here
//
if (!(Math.abs((ui.position.left + (ui_w)/2) - (fn.branding.modal_preview_width/2)) > 2 * margin)) {
ui.position.left = Math.round((fn.branding.modal_preview_width - ui_w)/2);
}
if (!(Math.abs((ui.position.top + (ui_h)/2) - (fn.branding.modal_preview_height/2)) > 2 * margin)) {
ui.position.top = Math.round((fn.branding.modal_preview_height - ui_h)/2);
}
});
So I've managed to add scrollbars to large jQM popups with css('overflow-y', 'scroll'). But how to do this only when the popup is larger than the user's viewport?
I'm trying with the jquery-visible plugin but I can't get it to respond:
http://jsfiddle.net/mmRnq/124/
$('#test-button').on('click', function(e) {
$('#confirmDialog').popup('open');
// https://stackoverflow.com/questions/20791374/jquery-check-if-element-is-visible-in-viewport
if(!$('#confirmDialog').visible(true)) {
alert('Popup not fully visible - add overflow scrolling');
$('#confirmDialog').css('overflow-y', 'scroll');
}
});
You can use
overflow-y: auto
This makes the scrollbar only visible when it is needed.
Updated FIDDLE
UPDATE:
You can also just make the content of the popup scrollable so the titlebar remains in view:
#confirmDialog .ui-content {
overflow-y: auto;
}
$('#confirmDialog').on({
popupbeforeposition: function() {
var maxHeight = $(window).height() - 120;
$('#confirmDialog .ui-content').height(maxHeight);
}
});
DEMO
I had a popup too large, although it was because of a searchable list. As I wanted to keep the search field at the top whilst scrolling the list only, I had to do this:
$("#confirmDialog").on({
popupbeforeposition: function (e, ui) {
var maxHeight = $(window).height() - 100 + "px";
$("#confirmDialog .ui-content").css("max-height", maxHeight);
},
popupafteropen: function (e, ui) {
var maxHeight = $(window).height() - 150 + "px";
$("#confirmDialog .ui-content ul").css("max-height", maxHeight).css("overflow-y", "scroll");
}
});
Remember do not perform arithmetic on maxHeight once assigned as it's a string, so this doesn't work:
$("#confirmDialog .ui-content").css("max-height", maxHeight - 50);
How to do a reversed resize with jquery UI? (Enlarge instead of minimize and vice versa) (needs to be to done after rotation done be the user - it could be any degrees) because no consideration is take into account when rotating divs
newItem is a div.
newItem.resizable({
handles: {
'nw': '.nwgrip',
'ne': '.negrip',
'sw': '.swgrip',
'se': '.segrip'
},
aspectRatio: true,
resize: function( event, ui ) {
//Original size
var origWidth = ui.size.width;
var origHeight = ui.size.height;
//Fumbling in the dark... ...How do I do "reversed" resize?
//Tried this:
ui.helper.css("width", (origWidth - ui.helper.css("width") *-2) + "px");
ui.helper.css("height", (origHeight - ui.helper.css("height") *-2) + "px");
}
});
I want to make a text in a d3 visualisation draggable for use in an editor. I started to play with on e of the examples (http://bl.ocks.org/mbostock/4063550). When i add a dragbeheavier to the text element, i can tell from the ChromeDevTools that somthing gets dragged but there is no visual representation af that drag. I also tried to do it using JQuery UI what didn't worked either. What do i miss and is it even possible to do so?
You can use drag.behaviour to add drag events to elements.
1) Create a function to handle the drag event (of type d3.event):
function dragmove(d) {
d3.select(this)
.style("top", ((d3.event.sourceEvent.pageY) - this.offsetHeight/2)+"px")
.style("left", ((d3.event.sourceEvent.pageX) - this.offsetWidth/2)+"px")
}
2) Create drag behavior using the above function as handler:
var drag = d3.behavior.drag()
.on("drag", dragmove);
3) Bind it to an element or a set of elements using .call on a d3 selection:
d3.select("body").append("div")
.attr("id", "draggable")
.text("Drag me bro!")
.call(drag)
Try it: http://jsfiddle.net/HvkgN/2/
Here's the same example, adapted for an svg text element:
function dragmove(d) {
d3.select(this)
.attr("y", d3.event.y)
.attr("x", d3.event.x)
}
var drag = d3.behavior.drag()
.on("drag", dragmove);
d3.select("body").append("svg")
.attr("height", 300)
.attr("width", 300)
.append("text")
.attr("x", 150)
.attr("y", 150)
.attr("id", "draggable")
.text("Drag me bro!")
.call(drag)
A better-looking way to add dragging to an SVG element is to use a translate transform that moves the draggable element around. Couple this with a drag event handler that uses d3.event.dx and d3.event.dy to monitor the mouse's movement.
var transX = 0;
var transY = 0;
var theElement = d3.select('svg#xyz text.blahblah').attr('transform', "translate(" + transX + ", " + transY + ")");
var repositionElement = function(data) {
transX += d3.event.dx;
transY += d3.event.dy;
theElement.attr('transform', "translate(" + transX + ", " + transY + ")");
};
var addDragging = function (element) {
element.call(d3.behavior.drag().on('drag', repositionElement));
};
addDragging(theElement);
Also, unlike changing x/y directly, this technique can be used to make an entire <g> group draggable, so when the user clicks and drags any part of the group, the whole group moves!
I am using jQuery UI to make some elements draggable and droppable. Much like a sortable, I'm trying to arrange the dragged element left/right/above/below to a hovered element when it's dropped. Also, I want to show an indicator on hovering another element, where the element will be arranged to, when it's dropped.
The behaviour should be, the the element will be dropped left of the hovered element if the cursor hovers the left third of the element. It should be dropped right of the hovered element if the cursor is above the right third of the hovered element. In script.aculo.us, there's a parameter called 'overlap' which indicates the mouse-overlap in percent of the hovered element.
Is there something similar in jQuery UI or how can this be done?
Ok, here's one way to do this. Basically, the idea is to read the offset, width and height of a droppable once a draggable is dragged over it. And while an element is dragged and the other element is hovered, the overlap is calculated using the mouse-position, the offset and the dimensions of the element (the offset is subtracted from the mouse-position and compared to the droppable's dimensions):
$(function() {
var offx, offy, w, h,
isOverEl = false;
$( ".component" ).draggable({
drag: function(event, ui) {
if(!isOverEl) return;
console.log(
((event.pageY-offy)/h)*100, // returns vertical overlap in %
((event.pageX-offx)/w)*100 //returns horizontal overlap in %
)
}
});
$( ".component" ).droppable({
over: function(event, ui) {
var $this = $(this),
offset = $this.offset();
offx = offset.left;
offy = offset.top;
w = $this.outerWidth();
h = $this.outerHeight();
isOverEl = true;
},
out: function(event, ui) {
isOverEl = false;
}
});
});