Smooth scroll UI draggable - javascript

I'm having a problem with jQuery UI draggable..
I with to scroll an element within a smaller parent element, so that it creates a kind of viewport.
However, I'm having an issue with the element being dragged as it's snapping to the edges of the port.
Been battling with this for a while now so could really use some help... please :)
Here is an example of the behaviour I'm trying to get : LINK
Here is a jsFiddle : LINK
and sample code:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<!-- CSS -->
<style type="text/css">
#port{
width:50px;
height:100px;
border:1px solid red;
overflow:hidden;
}
#obj {
width: 100px;
height: 100px;
border: 1px solid black;
cursor: pointer;
border-radius: 10px;
text-align: center;
background-color: lightpink;
}
</style>
<!-- Javascript -->
<script>
$(function ()
{
$("#obj").draggable(
{
containment: "#port",
scroll: false,
axis: 'x'
});
});
</script>
<!-- HTML -->
<div id="port">
<div id="obj">
<p>Drag me</p>
</div>
</div>

DEMO
Hope this is what you need, since you specified axis:x , it will move only in x axis
$(function () {
$("#obj").draggable({
scroll: false,
axis: 'x',
});
});

Here is the solution.
<div id="port">
<div id="obj">
<p>This is my new paragraph</p>
</div>
</div>
$(function() {
$( "#obj" ).draggable();
});
Link: http://jsfiddle.net/3HVT5/
It works when you remove the containment: "#port" line in your original code.

DEMO
I guess this is what you need
$(function () {
$("#obj").draggable({
containment: 'parent',
axis: 'x',
drag: function (event, ui) {
var p = ui.helper.position();
$(this).stop().animate({
right: p.right,
left: p.left
}, 400, 'linear');
}
});
});

Found 'a' solution here, but not sure of it's elegance...
<div id="outer"> <!-- position: relative -->
<div id="inner"> <!-- position: absolute -->
<img id="img_1" src="http://media02.hongkiat.com/nature-photography/red-planet.jpg" width="300" height="100" />
</div>
</div>
$(function()
{
var img = $("#img_1").draggable(
{
containment: '#inner',
axis: 'x'
}),
h = img.height(),
w = img.width(),
outer = $('#outer'),
oH = outer.height(),
oW = outer.width(),
iH = h + (h - oH),
iW = w + (w - oW),
iT = '-' + ((iH - oH)/2) + 'px',
iL = '-' + ((iW - oW)/2) + 'px';
$('#inner').css({ width: iW, height: iH, top: iT, left: iL });
})
However, tried it out and it does exactly what I'm after. So failing anything better I will go with this. Here is a fiddle link for you guys to try it out.
Thanks for your help...

Related

how to drop an element into a div and retrieve the coordinates relative to the div element?

i have a div element with id="drag", if a div element with id='drag' is dragged and dropped onto a div element with id="drop", it will display the coordinates value relative to the div element with id="drop" . I've managed to retrieve the coordinates relative to the div id="drop", but when the page is scrolled, the Y value also changes. how to solve this so that when the page is scrolled the Y value remains relative to the div with id='drop'? here is my code below
`
`<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery UI Droppable</title>
</head>
<body style="height: 200vh">
<div
id="drop"
style="
width: 600px;
height: 600px;
background-color: brown;
margin: 0 auto;
"
></div>
<div
id="drag"
style="background-color: blue; width: 100px; height: 100px"
></div>
</body>
<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>
<script>
$(function () {
$("#drag").draggable();
$("#drop").droppable({
accept: "#drag",
drop: function (e) {
var rect = e.target.getBoundingClientRect();
const coordinates = [
Math.round(e.pageX - rect.left),
Math.round(e.pageY - rect.top),
];
console.log(coordinates[0]);
console.log(coordinates[1]);
},
});
});
</script>
</html>`
`
At least from here, it never changes.
you can check it like that:
$(function () {
var coordinates;
$("#drag").draggable();
$("#drop").droppable({
accept: "#drag",
drop: function (e) {
var rect = e.target.getBoundingClientRect();
coordinates = [
Math.round(e.pageX - rect.left),
Math.round(e.pageY - rect.top),
];
setInterval(() => {
console.log(coordinates[0]);
console.log(coordinates[1]);
}, 500);
},
});
});

How to drag copy of element over the image using jquery?

I have a simple div element which I want to drag over the image but when I am dragging that div element over the image then it's not displaying there.
1. I want to drag copy of element over the image
I have tried with different suggestions but I am not getting result which I want.
1. I have use helper:'clone'
--> It's making copy when I am using Clone with draggable but still it's not showing element over the image tag.
here I have mentioned my simple code so please check it. And suggest me to achieve my result.
#{
ViewBag.Title = "Draggable";
Layout = null;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div>
<div class="ui-visual-focus draggable" style="width:100px;">
Textbox
</div>
<br />
<div class="droppable">
<img src="~/Documents/employeeFormImage.png" />
</div>
</div>
<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>
<script>
$(document).ready(function () {
});
$(function () {
$('.draggable').draggable({
revert: "invalid",
stack: ".draggable",
helper: 'clone'
});
$('.droppable').droppable({
accept: ".draggable",
drop: function (event, ui) {
var droppable = $(this);
var draggable = ui.draggable;
// Move draggable into droppable
draggable.clone().appendTo(droppable);
}
});
});
</script>
If I got your issue right, then you can achieve this with small trick in CSS, you can have the <img> with position:absolute and make it fit the container droppable <div> then it will be something like this, also note that I removed helper.clone.
Update: draggble with resizable, note that I added css for .ui-visual-focus <div> and I enforced position absolute so that it will not push down the droppable area.
$(function () {
$('.draggable').draggable({
revert: "invalid",
stack: ".draggable"
}).resizable();
$('.droppable').droppable({
accept: ".draggable",
});
});
img {
width: 300px;
height: auto;
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
.ui-visual-focus {
position:absolute !important;
width: 100px;
height: 30px;
}
.image-container {
top: 20px;
position:relative;
width:300px;
max-height: 200px;
border:1px solid;
height:200px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div>
<div class="ui-visual-focus draggable" style="width:100px;">
Textbox
</div>
<br />
<div class="image-container droppable">
<img src="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1652&q=80" />
</div>
</div>
<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>

Jquery increase droppable snap threshold and reset it's position if a snap couldn't happen

I have these divs two are draggable with a snap two are droppable.
I can't find or figure a way to do the following:
make both draggable divs and both droppable divs behave the same without massive copy pasting code.
Increase the snap threshold to the point where the draggable div auto moves into place.
If the draggable div is placed to little inside the droppable div it needs to be reset to it's last snapped location.\
I am only a beginner so please inform me with any wrongs in my post so I can edit it and learn from them.
<html>
<head>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#destination {
width: 150px;
height: 150px;
background-color: red;
}
#draggable { width: 150px; height: 150px; background:#eee;}
</style>
<script>
$(function() {
$( "#draggable" ).draggable({ snap: "#destination" });
$( "#destination" ).droppable();
});
</script>
</head>
<body>
<div id="destination">
destination
</div>
<div id = "draggable">
<p>Drag me !!!</p>
</div>
<div id="destination">
destination
</div>
<div id = "draggable">
<p>Drag me !!!</p>
</div>
</body>
</html>
You can do like this.
Set same attribute to draggable target and droppable target separately to avoid copy and paste.
Use snapMode: 'inner' make draggable div moves into place auto. And snapTolerance can change the threshold.
Finally, revert:'invalid' means draggable div will revert to last position if placed to little inside the droppable div.
If you want to make draggable1 pair to droppable1, you can add another attribute and pass accept option to droppable() init function.
<html>
<head>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
[data-action='droppable'] {
width: 150px;
height: 150px;
background-color: red;
}
[data-action='draggable'] { width: 150px; height: 150px; background:#eee;}
</style>
<script>
$(function() {
$( "[data-action='draggable']" ).draggable({
snap: "[data-action='droppable']",
snapMode: 'inner',
snapTolerance: 50,
revert: 'invalid'
});
$( "[data-action='droppable']" ).droppable({
accept: function(dragTarget) {
return $(this).attr('data-pair') === $(dragTarget).attr('data-pair');
}
});
});
</script>
</head>
<body>
<div id= "destination1" data-action='droppable' data-pair='1'>
destination1
</div>
<div id = "draggable1" data-action='draggable' data-pair='1'>
<p>Drag me1 !!!</p>
</div>
<div id= "destination2" data-action='droppable' data-pair='2'>
destination2
</div>
<div id = "draggable2" data-action='draggable' data-pair='2'>
<p>Drag me2 !!!</p>
</div>
</body>
</html>

how to make fake cursor in javascript

<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.js'></script>
<style type="text/css">
#fake /* fake cursor */
{
float:left;
position:absolute;
z-index:99;
}
</style>
<script type='text/javascript'>
$('#div1').ready(function() {
$('#div1').bind('mousemove', function(e){
$('#fake').css({
left: e.pageX + 200,
top: e.pageY
});
});
});
</script>
</head>
<body style="cursor:text;">
<div id="div1" style="height:300px;width:300px;border:1px solid red;"></div>
<div id="fake" ><img id="cursor" src="xp.png" /></div><br />
<body>
</html>
i want to hide the fake cursor when mouse cursor is out of div1.how can i do this.i tried using this code below but it dint work.please help.and any suggestions over shouldersurfing are most welcomed.
$("#div1").mouseout(function () {
$("#fake").hide();
});
Try to use Jquery's .on statement instead of your separate mousemove and mouseout events:
$("#div1").on({
mousemove: function () {
$('#fake').css({
left: e.pageX + 200,
top: e.pageY
});
},
mouseout: function () {
$("#fake").hide();
alert("Mouse Out!")
}
});
JSfiddle

jQuery, Move Point and Get Coordination

please visit this link and run the code.
http://jsfiddle.net/crisply/mQYVY/
Explain briefly, Green box is added to gray area by clicking [Add box] button.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="../Scripts/jquery-1.8.2.js"></script>
<script src="../Scripts/jquery-ui-1.8.24.js"></script>
<style type="text/css">
.draggable {
position: absolute;
width: 10px;
height: 10px;
background: green;
cursor: move;
}
#canvas {
width: 500px;
height: 400px;
background: #ccc;
position: relative;
margin: 2em auto;
}
#results {
text-align: center;
background: yellow;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(function () {
$(".draggable").draggable({
containment: "parent",
});
$('#btn_add').click(function () {
var htmlData = '<div class="draggable"></div>';
$('#canvas').append(htmlData);
$(".draggable").draggable();
});
});
//]]>
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="canvas">
<div class="draggable"></div>
</div>
<div id="results">coordination</div>
<input type='button' id="btn_add" value='Add box' />
<input type='button' id="btn_getCoord" value="Get Coordination" />
</form>
</body>
</html>
In addition to this code, i want to implement more.
Click the [Add box] button, => point generate random location.
Click the [Get Coordination] button,
=>get the coordination of several points and express result div (yellow area).
Like this.
-Coordination- x:230, y: 222 x:122, y: 233 x:423, y:55
x:50, y:30 ...
Could you please give some components for me?
I really appreciate your help.
http://jsfiddle.net/mQYVY/18/
$(function () {
// This run when the document is ready, so it only effect on first point, it won't effect on new points automatically.
$(".draggable").draggable({
containment: "parent",
});
$('#btn_add').click(function () {
var top = 1 + Math.floor(Math.random() * 390);
var left = 1 + Math.floor(Math.random() * 490);
var htmlData = '<div class="draggable" style="top:'+top+'px;left:'+left+'px;"></div>';
$('.canvas').append(htmlData);
// You need limit draggable containment for new point again.
$(".draggable").draggable({containment: "parent"});
});
$('#btn_getCoord').click(function () {
$('#results').html('-Coordination-');
$('.draggable').each(function(){
var cordInfo = '<br />x: '+$(this).position().left+', y: '+$(this).position().top;
$('#results').append(cordInfo);
});
});
});
Implementation here: http://jsfiddle.net/mQYVY/10/
First part:
var htmlData = $('<div class="draggable"></div>');
var x = Math.floor(Math.random()*501);
var y = Math.floor(Math.random()*401);
htmlData.css({'left': x+'px', 'top': y+'px'});
Second part:
$('#btn_getCoord').click(function() {
var output = '-Coordination-';
$('.draggable').each(function() {
output += '<br />x: ' + $(this).position().left + ', y: ' + $(this).position().top;
});
$('#results').html(output);
});
Updated JS for your first part:
$(function () {
$(".draggable").draggable({
containment: "parent",
});
$('#btn_add').click(function () {
var top = 1 + Math.floor(Math.random() * 390);
var left = 1 + Math.floor(Math.random() * 490);
var htmlData = '<div class="draggable" style="top:'+top+'px;left:'+left+'px;"></div>';
$('.canvas').append(htmlData);
$(".draggable").draggable();
});
});
For the second part follow this link: http://api.jquery.com/offset/

Categories

Resources