Does css transformation change jquery droppable area of a div
In my code there are multiple divs and I have Applied css transformations to make them look like a drawer. If I define jquery droppable on one of them then the position of the droppable area is slightly different than the actual position of the translated div.
code pen - https://codepen.io/nuwandharshana1/pen/pqdQme
I have created above pen to demonstrate the current problem. In the given pen, part of the div is not identified as a droppable area. therefore draggable element reverts to its original position. expected is to set entire div as a droppable area.
jquery html jquery-ui-droppable
asked Jan 1 at 3:58
Nuwan DharshanaNuwan Dharshana
113
add a comment |
In my code there are multiple divs and I have Applied css transformations to make them look like a drawer. If I define jquery droppable on one of them then the position of the droppable area is slightly different than the actual position of the translated div.
code pen - https://codepen.io/nuwandharshana1/pen/pqdQme
I have created above pen to demonstrate the current problem. In the given pen, part of the div is not identified as a droppable area. therefore draggable element reverts to its original position. expected is to set entire div as a droppable area.
jquery html jquery-ui-droppable
asked Jan 1 at 3:58
Nuwan DharshanaNuwan Dharshana
113
Can you show us some code first?
– Just code
Jan 1 at 4:08
code pen link
– Nuwan Dharshana
Jan 1 at 4:54
Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself.
– Erik Philips
Jan 1 at 5:42
@ErikPhilips thanks for your feedback I will add expected behavior and problem.
– Nuwan Dharshana
Jan 1 at 6:10
add a comment |
In my code there are multiple divs and I have Applied css transformations to make them look like a drawer. If I define jquery droppable on one of them then the position of the droppable area is slightly different than the actual position of the translated div.
code pen - https://codepen.io/nuwandharshana1/pen/pqdQme
I have created above pen to demonstrate the current problem. In the given pen, part of the div is not identified as a droppable area. therefore draggable element reverts to its original position. expected is to set entire div as a droppable area.
jquery html jquery-ui-droppable
asked Jan 1 at 3:58
Nuwan DharshanaNuwan Dharshana
113
In my code there are multiple divs and I have Applied css transformations to make them look like a drawer. If I define jquery droppable on one of them then the position of the droppable area is slightly different than the actual position of the translated div.
code pen - https://codepen.io/nuwandharshana1/pen/pqdQme
I have created above pen to demonstrate the current problem. In the given pen, part of the div is not identified as a droppable area. therefore draggable element reverts to its original position. expected is to set entire div as a droppable area.
jquery html jquery-ui-droppable
jquery html jquery-ui-droppable
asked Jan 1 at 3:58
Nuwan DharshanaNuwan Dharshana
113
asked Jan 1 at 3:58
Nuwan DharshanaNuwan Dharshana
113
edited Jan 1 at 6:13
Nuwan Dharshana
asked Jan 1 at 3:58
Nuwan DharshanaNuwan Dharshana
113
asked Jan 1 at 3:58
Nuwan DharshanaNuwan Dharshana
113
asked Jan 1 at 3:58
Nuwan DharshanaNuwan Dharshana
113
113
Can you show us some code first?
– Just code
Jan 1 at 4:08
code pen link
– Nuwan Dharshana
Jan 1 at 4:54
Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself.
– Erik Philips
Jan 1 at 5:42
@ErikPhilips thanks for your feedback I will add expected behavior and problem.
– Nuwan Dharshana
Jan 1 at 6:10
add a comment |
Can you show us some code first?
– Just code
Jan 1 at 4:08
code pen link
– Nuwan Dharshana
Jan 1 at 4:54
Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself.
– Erik Philips
Jan 1 at 5:42
@ErikPhilips thanks for your feedback I will add expected behavior and problem.
– Nuwan Dharshana
Jan 1 at 6:10
Can you show us some code first?
– Just code
Jan 1 at 4:08
Can you show us some code first?
– Just code
Jan 1 at 4:08
code pen link
– Nuwan Dharshana
Jan 1 at 4:54
code pen link
– Nuwan Dharshana
Jan 1 at 4:54
Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself.
– Erik Philips
Jan 1 at 5:42
Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself.
– Erik Philips
Jan 1 at 5:42
@ErikPhilips thanks for your feedback I will add expected behavior and problem.
– Nuwan Dharshana
Jan 1 at 6:10
@ErikPhilips thanks for your feedback I will add expected behavior and problem.
– Nuwan Dharshana
Jan 1 at 6:10
add a comment |
1 Answer
1
active
oldest
votes
Problem Occurs due to css property called perspective which defines how far the object is away from the user. closer elements looks bigger than the actual size. As in the code pen example div looks bigger than the actual size.
but jquery droppable area created based on actual div. therefore part of the div will not be identified as a droppable area. that cause draggable element reverted into its original position.
answered Jan 1 at 9:49
Nuwan DharshanaNuwan Dharshana
113
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%2f53992917%2fdoes-css-transformation-change-jquery-droppable-area-of-a-div%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Problem Occurs due to css property called perspective which defines how far the object is away from the user. closer elements looks bigger than the actual size. As in the code pen example div looks bigger than the actual size.
but jquery droppable area created based on actual div. therefore part of the div will not be identified as a droppable area. that cause draggable element reverted into its original position.
answered Jan 1 at 9:49
Nuwan DharshanaNuwan Dharshana
113
add a comment |
Problem Occurs due to css property called perspective which defines how far the object is away from the user. closer elements looks bigger than the actual size. As in the code pen example div looks bigger than the actual size.
but jquery droppable area created based on actual div. therefore part of the div will not be identified as a droppable area. that cause draggable element reverted into its original position.
answered Jan 1 at 9:49
Nuwan DharshanaNuwan Dharshana
113
add a comment |
Problem Occurs due to css property called perspective which defines how far the object is away from the user. closer elements looks bigger than the actual size. As in the code pen example div looks bigger than the actual size.
but jquery droppable area created based on actual div. therefore part of the div will not be identified as a droppable area. that cause draggable element reverted into its original position.
answered Jan 1 at 9:49
Nuwan DharshanaNuwan Dharshana
113
Problem Occurs due to css property called perspective which defines how far the object is away from the user. closer elements looks bigger than the actual size. As in the code pen example div looks bigger than the actual size.
but jquery droppable area created based on actual div. therefore part of the div will not be identified as a droppable area. that cause draggable element reverted into its original position.
answered Jan 1 at 9:49
Nuwan DharshanaNuwan Dharshana
113
answered Jan 1 at 9:49
Nuwan DharshanaNuwan Dharshana
113
answered Jan 1 at 9:49
Nuwan DharshanaNuwan Dharshana
113
answered Jan 1 at 9:49
Nuwan DharshanaNuwan Dharshana
113
113
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%2f53992917%2fdoes-css-transformation-change-jquery-droppable-area-of-a-div%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
Can you show us some code first?
– Just code
Jan 1 at 4:08
code pen link
– Nuwan Dharshana
Jan 1 at 4:54
Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself.
– Erik Philips
Jan 1 at 5:42
@ErikPhilips thanks for your feedback I will add expected behavior and problem.
– Nuwan Dharshana
Jan 1 at 6:10