interchange div1 elements with div2 elements. using drag and drop functionality
i am working on a image slider. when i choose images for slider, i want to add a drag and drop feature there. so user can re-arrange the images order. the code below dynamically creates the divs which are having those images. the jquery functions for this code is given in example link below which is used to accomplish what i need.
<div id="filesList">
@foreach (var item in imgArray)
{
<div ondrop="drop(event)" ondragover="allowDrop(event)">
<div class="img101 floatleft selectedFile tempImages" id="img101_@i" ondragstart="drag(event)">
<img src="@item"/>
<div>
<a href="#" id="DeleteCurrentImage" onclick="DeleteCurrentImage('@item',@i);">Delete</a>
</div>
</div>
</div>
i++;
}
<div style="clear: both"></div>
</div>
i have tested some options from stackoverflow already given questions and from other sources to do it (example in given link). when i use given below code example. it is not given the required results. this code only drags the image from div1 and replace it with existing image in other div2. i dont want this functionality. i want that when div1 element is dragged and dropped in to div2. the elements of div1 should be replaced with div2 elements.
https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>Drag the W3Schools image into the rectangle:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>
jquery html drag-and-drop
edited Nov 16 '18 at 7:54
Community♦
11
asked Nov 15 '18 at 14:48
Waqas NadeemWaqas Nadeem
12
add a comment |
i am working on a image slider. when i choose images for slider, i want to add a drag and drop feature there. so user can re-arrange the images order. the code below dynamically creates the divs which are having those images. the jquery functions for this code is given in example link below which is used to accomplish what i need.
<div id="filesList">
@foreach (var item in imgArray)
{
<div ondrop="drop(event)" ondragover="allowDrop(event)">
<div class="img101 floatleft selectedFile tempImages" id="img101_@i" ondragstart="drag(event)">
<img src="@item"/>
<div>
<a href="#" id="DeleteCurrentImage" onclick="DeleteCurrentImage('@item',@i);">Delete</a>
</div>
</div>
</div>
i++;
}
<div style="clear: both"></div>
</div>
i have tested some options from stackoverflow already given questions and from other sources to do it (example in given link). when i use given below code example. it is not given the required results. this code only drags the image from div1 and replace it with existing image in other div2. i dont want this functionality. i want that when div1 element is dragged and dropped in to div2. the elements of div1 should be replaced with div2 elements.
https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>Drag the W3Schools image into the rectangle:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>
jquery html drag-and-drop
edited Nov 16 '18 at 7:54
Community♦
11
asked Nov 15 '18 at 14:48
Waqas NadeemWaqas Nadeem
12
add a comment |
i am working on a image slider. when i choose images for slider, i want to add a drag and drop feature there. so user can re-arrange the images order. the code below dynamically creates the divs which are having those images. the jquery functions for this code is given in example link below which is used to accomplish what i need.
<div id="filesList">
@foreach (var item in imgArray)
{
<div ondrop="drop(event)" ondragover="allowDrop(event)">
<div class="img101 floatleft selectedFile tempImages" id="img101_@i" ondragstart="drag(event)">
<img src="@item"/>
<div>
<a href="#" id="DeleteCurrentImage" onclick="DeleteCurrentImage('@item',@i);">Delete</a>
</div>
</div>
</div>
i++;
}
<div style="clear: both"></div>
</div>
i have tested some options from stackoverflow already given questions and from other sources to do it (example in given link). when i use given below code example. it is not given the required results. this code only drags the image from div1 and replace it with existing image in other div2. i dont want this functionality. i want that when div1 element is dragged and dropped in to div2. the elements of div1 should be replaced with div2 elements.
https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>Drag the W3Schools image into the rectangle:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>
jquery html drag-and-drop
edited Nov 16 '18 at 7:54
Community♦
11
asked Nov 15 '18 at 14:48
Waqas NadeemWaqas Nadeem
12
i am working on a image slider. when i choose images for slider, i want to add a drag and drop feature there. so user can re-arrange the images order. the code below dynamically creates the divs which are having those images. the jquery functions for this code is given in example link below which is used to accomplish what i need.
<div id="filesList">
@foreach (var item in imgArray)
{
<div ondrop="drop(event)" ondragover="allowDrop(event)">
<div class="img101 floatleft selectedFile tempImages" id="img101_@i" ondragstart="drag(event)">
<img src="@item"/>
<div>
<a href="#" id="DeleteCurrentImage" onclick="DeleteCurrentImage('@item',@i);">Delete</a>
</div>
</div>
</div>
i++;
}
<div style="clear: both"></div>
</div>
i have tested some options from stackoverflow already given questions and from other sources to do it (example in given link). when i use given below code example. it is not given the required results. this code only drags the image from div1 and replace it with existing image in other div2. i dont want this functionality. i want that when div1 element is dragged and dropped in to div2. the elements of div1 should be replaced with div2 elements.
https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>Drag the W3Schools image into the rectangle:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>
jquery html drag-and-drop
jquery html drag-and-drop
edited Nov 16 '18 at 7:54
Community♦
11
asked Nov 15 '18 at 14:48
Waqas NadeemWaqas Nadeem
12
edited Nov 16 '18 at 7:54
Community♦
11
asked Nov 15 '18 at 14:48
Waqas NadeemWaqas Nadeem
12
edited Nov 16 '18 at 7:54
Community♦
11
edited Nov 16 '18 at 7:54
Community♦
11
edited Nov 16 '18 at 7:54
Community♦
11
11
asked Nov 15 '18 at 14:48
Waqas NadeemWaqas Nadeem
12
asked Nov 15 '18 at 14:48
Waqas NadeemWaqas Nadeem
12
asked Nov 15 '18 at 14:48
Waqas NadeemWaqas Nadeem
12
12
add a comment |
add a comment |
0
active
oldest
votes
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%2f53322028%2finterchange-div1-elements-with-div2-elements-using-drag-and-drop-functionality%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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%2f53322028%2finterchange-div1-elements-with-div2-elements-using-drag-and-drop-functionality%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
