I'm trying to make an image draggable but whenever I resize the height and width it stops working
So I'm trying to make a photobook for my class project. I want the photos to be able to be draggable and moved across the webpage. I was able to make one of my images draggable, but the image is way too large so I resized it in css.
However, whenever I resized it the draggable function stopped working. So I'm not sure what I'm doing wrong.
<body>
<div id="draggable" class="ui-widget-content">
<div id="resizeableDiv" class="ui-widget-content">
<div id="img1">
<img src="imgs/alexa.jpg">
</div>
</body>
<script>
$(function() {
$("resizableDiv").resizable();
});
$( function() {
$( "#draggable" ).draggable();
} );
</script>
jquery css jquery-ui draggable jquery-ui-draggable
asked Nov 14 '18 at 17:52
Tracy FernandezTracy Fernandez
32
add a comment |
So I'm trying to make a photobook for my class project. I want the photos to be able to be draggable and moved across the webpage. I was able to make one of my images draggable, but the image is way too large so I resized it in css.
However, whenever I resized it the draggable function stopped working. So I'm not sure what I'm doing wrong.
<body>
<div id="draggable" class="ui-widget-content">
<div id="resizeableDiv" class="ui-widget-content">
<div id="img1">
<img src="imgs/alexa.jpg">
</div>
</body>
<script>
$(function() {
$("resizableDiv").resizable();
});
$( function() {
$( "#draggable" ).draggable();
} );
</script>
jquery css jquery-ui draggable jquery-ui-draggable
asked Nov 14 '18 at 17:52
Tracy FernandezTracy Fernandez
32
add a comment |
So I'm trying to make a photobook for my class project. I want the photos to be able to be draggable and moved across the webpage. I was able to make one of my images draggable, but the image is way too large so I resized it in css.
However, whenever I resized it the draggable function stopped working. So I'm not sure what I'm doing wrong.
<body>
<div id="draggable" class="ui-widget-content">
<div id="resizeableDiv" class="ui-widget-content">
<div id="img1">
<img src="imgs/alexa.jpg">
</div>
</body>
<script>
$(function() {
$("resizableDiv").resizable();
});
$( function() {
$( "#draggable" ).draggable();
} );
</script>
jquery css jquery-ui draggable jquery-ui-draggable
asked Nov 14 '18 at 17:52
Tracy FernandezTracy Fernandez
32
So I'm trying to make a photobook for my class project. I want the photos to be able to be draggable and moved across the webpage. I was able to make one of my images draggable, but the image is way too large so I resized it in css.
However, whenever I resized it the draggable function stopped working. So I'm not sure what I'm doing wrong.
<body>
<div id="draggable" class="ui-widget-content">
<div id="resizeableDiv" class="ui-widget-content">
<div id="img1">
<img src="imgs/alexa.jpg">
</div>
</body>
<script>
$(function() {
$("resizableDiv").resizable();
});
$( function() {
$( "#draggable" ).draggable();
} );
</script>
jquery css jquery-ui draggable jquery-ui-draggable
jquery css jquery-ui draggable jquery-ui-draggable
asked Nov 14 '18 at 17:52
Tracy FernandezTracy Fernandez
32
asked Nov 14 '18 at 17:52
Tracy FernandezTracy Fernandez
32
asked Nov 14 '18 at 17:52
Tracy FernandezTracy Fernandez
32
asked Nov 14 '18 at 17:52
Tracy FernandezTracy Fernandez
32
asked Nov 14 '18 at 17:52
Tracy FernandezTracy Fernandez
32
32
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
Welcome to Stack Overflow.
I think you're making it more complex than is needed. I would advise the following example:
$(function() {
$(".resize").resizable({
handles: "ne, nw, se, sw",
aspectRatio: true
});
$(".ui-resizable-handle-se").removeClass("ui-icon ui-icon-gripsmall-diagonal-se");
$(".drag").draggable();
});.resize img {
width: 100%;
height: 100%;
}
.ui-resizable-handle {
width: 8px;
height: 8px;
background: #fff;
border: 1px solid #000;
}<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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>
<div id="div-1" class="drag resize edit-image ui-widget-content">
<img src="//i.imgur.com/KcxrVPk.jpg">
</div>If you do not like the extra handles, you do not have to use them. In this example, you are dragging and resizing just one <div> element. I opted to use the class selector so that the code is a bit more portable. So you can have many images that can be dragged and resized.
You may also consider not using an <img> element inside the <div>. in this case, you would use CSS to set the background-image property to the image image in question. Something like this:
$(function() {
$(".edit-image").each(function(ind, el) {
var imgSrc = $(el).data("src");
var img = $("<img>", {
src: imgSrc,
style: "display: none;"
}).appendTo("body");
$(el).css({
"background-image": "url('" + imgSrc + "')",
width: img.width(),
height: img.height()
});
img.remove();
});
$(".resize").resizable({
handles: "ne, nw, se, sw",
aspectRatio: true,
resize: function(e, ui) {
var w = ui.size.width,
h = ui.size.height;
$(this).css("background-size", w + "px " + h + "px");
}
});
$(".drag").draggable();
});.resize img {
width: 100%;
height: 100%;
}
.edit-image {
background-repeat: no-repeat;
}
.ui-resizable-handle {
width: 8px;
height: 8px;
background: #fff;
border: 1px solid #000;
}<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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>
<div id="div-1" class="drag resize edit-image ui-widget-content" data-src="//i.imgur.com/KcxrVPk.jpg">
</div>Hope that helps.
answered Nov 14 '18 at 21:03
TwistyTwisty
13.5k11534
add a comment |
You forgot a # in your selector, and missed some </div> tags:
<body>
<div id="draggable" class="ui-widget-content"></div>
<div id="resizeableDiv" class="ui-widget-content"></div>
<div id="img1">
<img src="imgs/alexa.jpg">
</div>
</body>
<script>
$(function () {
$("#resizableDiv").resizable();
});
$(function () {
$("#draggable").draggable();
});
</script>
That should do the trick.
edited Nov 14 '18 at 20:47
Love Buddha
907
answered Nov 14 '18 at 17:59
Peter McLaughlinPeter McLaughlin
514
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53306118%2fim-trying-to-make-an-image-draggable-but-whenever-i-resize-the-height-and-width%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Welcome to Stack Overflow.
I think you're making it more complex than is needed. I would advise the following example:
$(function() {
$(".resize").resizable({
handles: "ne, nw, se, sw",
aspectRatio: true
});
$(".ui-resizable-handle-se").removeClass("ui-icon ui-icon-gripsmall-diagonal-se");
$(".drag").draggable();
});.resize img {
width: 100%;
height: 100%;
}
.ui-resizable-handle {
width: 8px;
height: 8px;
background: #fff;
border: 1px solid #000;
}<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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>
<div id="div-1" class="drag resize edit-image ui-widget-content">
<img src="//i.imgur.com/KcxrVPk.jpg">
</div>If you do not like the extra handles, you do not have to use them. In this example, you are dragging and resizing just one <div> element. I opted to use the class selector so that the code is a bit more portable. So you can have many images that can be dragged and resized.
You may also consider not using an <img> element inside the <div>. in this case, you would use CSS to set the background-image property to the image image in question. Something like this:
$(function() {
$(".edit-image").each(function(ind, el) {
var imgSrc = $(el).data("src");
var img = $("<img>", {
src: imgSrc,
style: "display: none;"
}).appendTo("body");
$(el).css({
"background-image": "url('" + imgSrc + "')",
width: img.width(),
height: img.height()
});
img.remove();
});
$(".resize").resizable({
handles: "ne, nw, se, sw",
aspectRatio: true,
resize: function(e, ui) {
var w = ui.size.width,
h = ui.size.height;
$(this).css("background-size", w + "px " + h + "px");
}
});
$(".drag").draggable();
});.resize img {
width: 100%;
height: 100%;
}
.edit-image {
background-repeat: no-repeat;
}
.ui-resizable-handle {
width: 8px;
height: 8px;
background: #fff;
border: 1px solid #000;
}<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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>
<div id="div-1" class="drag resize edit-image ui-widget-content" data-src="//i.imgur.com/KcxrVPk.jpg">
</div>Hope that helps.
answered Nov 14 '18 at 21:03
TwistyTwisty
13.5k11534
add a comment |
Welcome to Stack Overflow.
I think you're making it more complex than is needed. I would advise the following example:
$(function() {
$(".resize").resizable({
handles: "ne, nw, se, sw",
aspectRatio: true
});
$(".ui-resizable-handle-se").removeClass("ui-icon ui-icon-gripsmall-diagonal-se");
$(".drag").draggable();
});.resize img {
width: 100%;
height: 100%;
}
.ui-resizable-handle {
width: 8px;
height: 8px;
background: #fff;
border: 1px solid #000;
}<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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>
<div id="div-1" class="drag resize edit-image ui-widget-content">
<img src="//i.imgur.com/KcxrVPk.jpg">
</div>If you do not like the extra handles, you do not have to use them. In this example, you are dragging and resizing just one <div> element. I opted to use the class selector so that the code is a bit more portable. So you can have many images that can be dragged and resized.
You may also consider not using an <img> element inside the <div>. in this case, you would use CSS to set the background-image property to the image image in question. Something like this:
$(function() {
$(".edit-image").each(function(ind, el) {
var imgSrc = $(el).data("src");
var img = $("<img>", {
src: imgSrc,
style: "display: none;"
}).appendTo("body");
$(el).css({
"background-image": "url('" + imgSrc + "')",
width: img.width(),
height: img.height()
});
img.remove();
});
$(".resize").resizable({
handles: "ne, nw, se, sw",
aspectRatio: true,
resize: function(e, ui) {
var w = ui.size.width,
h = ui.size.height;
$(this).css("background-size", w + "px " + h + "px");
}
});
$(".drag").draggable();
});.resize img {
width: 100%;
height: 100%;
}
.edit-image {
background-repeat: no-repeat;
}
.ui-resizable-handle {
width: 8px;
height: 8px;
background: #fff;
border: 1px solid #000;
}<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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>
<div id="div-1" class="drag resize edit-image ui-widget-content" data-src="//i.imgur.com/KcxrVPk.jpg">
</div>Hope that helps.
answered Nov 14 '18 at 21:03
TwistyTwisty
13.5k11534
add a comment |
Welcome to Stack Overflow.
I think you're making it more complex than is needed. I would advise the following example:
$(function() {
$(".resize").resizable({
handles: "ne, nw, se, sw",
aspectRatio: true
});
$(".ui-resizable-handle-se").removeClass("ui-icon ui-icon-gripsmall-diagonal-se");
$(".drag").draggable();
});.resize img {
width: 100%;
height: 100%;
}
.ui-resizable-handle {
width: 8px;
height: 8px;
background: #fff;
border: 1px solid #000;
}<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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>
<div id="div-1" class="drag resize edit-image ui-widget-content">
<img src="//i.imgur.com/KcxrVPk.jpg">
</div>If you do not like the extra handles, you do not have to use them. In this example, you are dragging and resizing just one <div> element. I opted to use the class selector so that the code is a bit more portable. So you can have many images that can be dragged and resized.
You may also consider not using an <img> element inside the <div>. in this case, you would use CSS to set the background-image property to the image image in question. Something like this:
$(function() {
$(".edit-image").each(function(ind, el) {
var imgSrc = $(el).data("src");
var img = $("<img>", {
src: imgSrc,
style: "display: none;"
}).appendTo("body");
$(el).css({
"background-image": "url('" + imgSrc + "')",
width: img.width(),
height: img.height()
});
img.remove();
});
$(".resize").resizable({
handles: "ne, nw, se, sw",
aspectRatio: true,
resize: function(e, ui) {
var w = ui.size.width,
h = ui.size.height;
$(this).css("background-size", w + "px " + h + "px");
}
});
$(".drag").draggable();
});.resize img {
width: 100%;
height: 100%;
}
.edit-image {
background-repeat: no-repeat;
}
.ui-resizable-handle {
width: 8px;
height: 8px;
background: #fff;
border: 1px solid #000;
}<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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>
<div id="div-1" class="drag resize edit-image ui-widget-content" data-src="//i.imgur.com/KcxrVPk.jpg">
</div>Hope that helps.
answered Nov 14 '18 at 21:03
TwistyTwisty
13.5k11534
Welcome to Stack Overflow.
I think you're making it more complex than is needed. I would advise the following example:
$(function() {
$(".resize").resizable({
handles: "ne, nw, se, sw",
aspectRatio: true
});
$(".ui-resizable-handle-se").removeClass("ui-icon ui-icon-gripsmall-diagonal-se");
$(".drag").draggable();
});.resize img {
width: 100%;
height: 100%;
}
.ui-resizable-handle {
width: 8px;
height: 8px;
background: #fff;
border: 1px solid #000;
}<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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>
<div id="div-1" class="drag resize edit-image ui-widget-content">
<img src="//i.imgur.com/KcxrVPk.jpg">
</div>If you do not like the extra handles, you do not have to use them. In this example, you are dragging and resizing just one <div> element. I opted to use the class selector so that the code is a bit more portable. So you can have many images that can be dragged and resized.
You may also consider not using an <img> element inside the <div>. in this case, you would use CSS to set the background-image property to the image image in question. Something like this:
$(function() {
$(".edit-image").each(function(ind, el) {
var imgSrc = $(el).data("src");
var img = $("<img>", {
src: imgSrc,
style: "display: none;"
}).appendTo("body");
$(el).css({
"background-image": "url('" + imgSrc + "')",
width: img.width(),
height: img.height()
});
img.remove();
});
$(".resize").resizable({
handles: "ne, nw, se, sw",
aspectRatio: true,
resize: function(e, ui) {
var w = ui.size.width,
h = ui.size.height;
$(this).css("background-size", w + "px " + h + "px");
}
});
$(".drag").draggable();
});.resize img {
width: 100%;
height: 100%;
}
.edit-image {
background-repeat: no-repeat;
}
.ui-resizable-handle {
width: 8px;
height: 8px;
background: #fff;
border: 1px solid #000;
}<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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>
<div id="div-1" class="drag resize edit-image ui-widget-content" data-src="//i.imgur.com/KcxrVPk.jpg">
</div>Hope that helps.
$(function() {
$(".resize").resizable({
handles: "ne, nw, se, sw",
aspectRatio: true
});
$(".ui-resizable-handle-se").removeClass("ui-icon ui-icon-gripsmall-diagonal-se");
$(".drag").draggable();
});.resize img {
width: 100%;
height: 100%;
}
.ui-resizable-handle {
width: 8px;
height: 8px;
background: #fff;
border: 1px solid #000;
}<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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>
<div id="div-1" class="drag resize edit-image ui-widget-content">
<img src="//i.imgur.com/KcxrVPk.jpg">
</div>$(function() {
$(".resize").resizable({
handles: "ne, nw, se, sw",
aspectRatio: true
});
$(".ui-resizable-handle-se").removeClass("ui-icon ui-icon-gripsmall-diagonal-se");
$(".drag").draggable();
});.resize img {
width: 100%;
height: 100%;
}
.ui-resizable-handle {
width: 8px;
height: 8px;
background: #fff;
border: 1px solid #000;
}<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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>
<div id="div-1" class="drag resize edit-image ui-widget-content">
<img src="//i.imgur.com/KcxrVPk.jpg">
</div>$(function() {
$(".edit-image").each(function(ind, el) {
var imgSrc = $(el).data("src");
var img = $("<img>", {
src: imgSrc,
style: "display: none;"
}).appendTo("body");
$(el).css({
"background-image": "url('" + imgSrc + "')",
width: img.width(),
height: img.height()
});
img.remove();
});
$(".resize").resizable({
handles: "ne, nw, se, sw",
aspectRatio: true,
resize: function(e, ui) {
var w = ui.size.width,
h = ui.size.height;
$(this).css("background-size", w + "px " + h + "px");
}
});
$(".drag").draggable();
});.resize img {
width: 100%;
height: 100%;
}
.edit-image {
background-repeat: no-repeat;
}
.ui-resizable-handle {
width: 8px;
height: 8px;
background: #fff;
border: 1px solid #000;
}<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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>
<div id="div-1" class="drag resize edit-image ui-widget-content" data-src="//i.imgur.com/KcxrVPk.jpg">
</div>$(function() {
$(".edit-image").each(function(ind, el) {
var imgSrc = $(el).data("src");
var img = $("<img>", {
src: imgSrc,
style: "display: none;"
}).appendTo("body");
$(el).css({
"background-image": "url('" + imgSrc + "')",
width: img.width(),
height: img.height()
});
img.remove();
});
$(".resize").resizable({
handles: "ne, nw, se, sw",
aspectRatio: true,
resize: function(e, ui) {
var w = ui.size.width,
h = ui.size.height;
$(this).css("background-size", w + "px " + h + "px");
}
});
$(".drag").draggable();
});.resize img {
width: 100%;
height: 100%;
}
.edit-image {
background-repeat: no-repeat;
}
.ui-resizable-handle {
width: 8px;
height: 8px;
background: #fff;
border: 1px solid #000;
}<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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>
<div id="div-1" class="drag resize edit-image ui-widget-content" data-src="//i.imgur.com/KcxrVPk.jpg">
</div>answered Nov 14 '18 at 21:03
TwistyTwisty
13.5k11534
answered Nov 14 '18 at 21:03
TwistyTwisty
13.5k11534
answered Nov 14 '18 at 21:03
TwistyTwisty
13.5k11534
answered Nov 14 '18 at 21:03
TwistyTwisty
13.5k11534
13.5k11534
add a comment |
add a comment |
You forgot a # in your selector, and missed some </div> tags:
<body>
<div id="draggable" class="ui-widget-content"></div>
<div id="resizeableDiv" class="ui-widget-content"></div>
<div id="img1">
<img src="imgs/alexa.jpg">
</div>
</body>
<script>
$(function () {
$("#resizableDiv").resizable();
});
$(function () {
$("#draggable").draggable();
});
</script>
That should do the trick.
edited Nov 14 '18 at 20:47
Love Buddha
907
answered Nov 14 '18 at 17:59
Peter McLaughlinPeter McLaughlin
514
add a comment |
You forgot a # in your selector, and missed some </div> tags:
<body>
<div id="draggable" class="ui-widget-content"></div>
<div id="resizeableDiv" class="ui-widget-content"></div>
<div id="img1">
<img src="imgs/alexa.jpg">
</div>
</body>
<script>
$(function () {
$("#resizableDiv").resizable();
});
$(function () {
$("#draggable").draggable();
});
</script>
That should do the trick.
edited Nov 14 '18 at 20:47
Love Buddha
907
answered Nov 14 '18 at 17:59
Peter McLaughlinPeter McLaughlin
514
add a comment |
You forgot a # in your selector, and missed some </div> tags:
<body>
<div id="draggable" class="ui-widget-content"></div>
<div id="resizeableDiv" class="ui-widget-content"></div>
<div id="img1">
<img src="imgs/alexa.jpg">
</div>
</body>
<script>
$(function () {
$("#resizableDiv").resizable();
});
$(function () {
$("#draggable").draggable();
});
</script>
That should do the trick.
edited Nov 14 '18 at 20:47
Love Buddha
907
answered Nov 14 '18 at 17:59
Peter McLaughlinPeter McLaughlin
514
You forgot a # in your selector, and missed some </div> tags:
<body>
<div id="draggable" class="ui-widget-content"></div>
<div id="resizeableDiv" class="ui-widget-content"></div>
<div id="img1">
<img src="imgs/alexa.jpg">
</div>
</body>
<script>
$(function () {
$("#resizableDiv").resizable();
});
$(function () {
$("#draggable").draggable();
});
</script>
That should do the trick.
edited Nov 14 '18 at 20:47
Love Buddha
907
answered Nov 14 '18 at 17:59
Peter McLaughlinPeter McLaughlin
514
edited Nov 14 '18 at 20:47
Love Buddha
907
edited Nov 14 '18 at 20:47
Love Buddha
907
edited Nov 14 '18 at 20:47
Love Buddha
907
907
answered Nov 14 '18 at 17:59
Peter McLaughlinPeter McLaughlin
514
answered Nov 14 '18 at 17:59
Peter McLaughlinPeter McLaughlin
514
answered Nov 14 '18 at 17:59
Peter McLaughlinPeter McLaughlin
514
514
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53306118%2fim-trying-to-make-an-image-draggable-but-whenever-i-resize-the-height-and-width%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
