Creating an object in javascript that can be target to droppable from jQuery UI
up vote
0
down vote
favorite
I am trying to drag and drop elements into a dropbox which is created via javascript. I want to display a message whenever i drop it in one of the blue dropboxes. Sadly, it doesn't work on the new object. If I create a canvas in html-code, it does work.
Thank you for your help!
JS fiddle: https://jsfiddle.net/tk8sLn9e/
HTML
<html>
<head>
<link rel="stylesheet" href="StyleSheet.css" />
<meta charset="utf-8" />
<title></title>
<script src="Scripts/jquery-3.3.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.12.1.js" type="text/javascript"></script>
<script src="JavaScript.js"></script>
</head>
<body>
<div class="outerContainer">
<div class="tile">Price</div>
<div class="tile">Shares Outstanding</div>
<div class="tile">Market Cap</div>
</div>
</body>
</html>
JS
$(document).ready(function ()
$('.tile').draggable(
helper: 'clone',
stack: ".tile",
start: function (event, ui) createDropBox() ,
stop: function (event, ui) deleteDropBox()
);
$('.dropContainer').droppable(
drop: function (event, ui) alert("alarm")
);
)
var dropBoxWidth = 200;
var dropBox1Height = 75;
var dropBoxHeight = 150;
var dropBox1X = 240;
var dropBox1Y = 10;
var dropBox2X = dropBox1X;
var dropBox2Y = dropBox1Y + dropBox1Height + 50;
var dropBox3X = dropBox1X + dropBoxWidth + 100;
var dropBox3Y = dropBox1Y;
function createDropBox()
drawRectangle(dropBox1X, dropBox1Y, dropBoxWidth, dropBox1Height, "dropBox1");
drawRectangle(dropBox2X, dropBox2Y, dropBoxWidth, dropBoxHeight, "dropBox2");
drawRectangle(dropBox3X, dropBox3Y, dropBoxWidth, dropBoxHeight, "dropBox3");
function drawRectangle(left, top, width, height, id)
var dropBox = document.createElement("canvas");
dropBox.style.position = "absolute";
dropBox.style.left = left + "px";
dropBox.style.top = top + "px";
dropBox.style.width = width + "px";
dropBox.style.height = height + "px";
dropBox.style.backgroundColor = "#d8ecf3";
dropBox.style.border = "solid lightblue";
dropBox.style.borderRadius = "10px";
dropBox.id = id;
dropBox.className = "dropContainer";
document.body.appendChild(dropBox);
function deleteDropBox()
var element1 = document.getElementById("dropBox1");
var element2 = document.getElementById("dropBox2");
var element3 = document.getElementById("dropBox3");
element1.parentNode.removeChild(element1);
element2.parentNode.removeChild(element2);
element3.parentNode.removeChild(element3);
javascript jquery-ui
asked Nov 10 at 15:08
Kohlkopf
134
add a comment |
up vote
0
down vote
favorite
I am trying to drag and drop elements into a dropbox which is created via javascript. I want to display a message whenever i drop it in one of the blue dropboxes. Sadly, it doesn't work on the new object. If I create a canvas in html-code, it does work.
Thank you for your help!
JS fiddle: https://jsfiddle.net/tk8sLn9e/
HTML
<html>
<head>
<link rel="stylesheet" href="StyleSheet.css" />
<meta charset="utf-8" />
<title></title>
<script src="Scripts/jquery-3.3.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.12.1.js" type="text/javascript"></script>
<script src="JavaScript.js"></script>
</head>
<body>
<div class="outerContainer">
<div class="tile">Price</div>
<div class="tile">Shares Outstanding</div>
<div class="tile">Market Cap</div>
</div>
</body>
</html>
JS
$(document).ready(function ()
$('.tile').draggable(
helper: 'clone',
stack: ".tile",
start: function (event, ui) createDropBox() ,
stop: function (event, ui) deleteDropBox()
);
$('.dropContainer').droppable(
drop: function (event, ui) alert("alarm")
);
)
var dropBoxWidth = 200;
var dropBox1Height = 75;
var dropBoxHeight = 150;
var dropBox1X = 240;
var dropBox1Y = 10;
var dropBox2X = dropBox1X;
var dropBox2Y = dropBox1Y + dropBox1Height + 50;
var dropBox3X = dropBox1X + dropBoxWidth + 100;
var dropBox3Y = dropBox1Y;
function createDropBox()
drawRectangle(dropBox1X, dropBox1Y, dropBoxWidth, dropBox1Height, "dropBox1");
drawRectangle(dropBox2X, dropBox2Y, dropBoxWidth, dropBoxHeight, "dropBox2");
drawRectangle(dropBox3X, dropBox3Y, dropBoxWidth, dropBoxHeight, "dropBox3");
function drawRectangle(left, top, width, height, id)
var dropBox = document.createElement("canvas");
dropBox.style.position = "absolute";
dropBox.style.left = left + "px";
dropBox.style.top = top + "px";
dropBox.style.width = width + "px";
dropBox.style.height = height + "px";
dropBox.style.backgroundColor = "#d8ecf3";
dropBox.style.border = "solid lightblue";
dropBox.style.borderRadius = "10px";
dropBox.id = id;
dropBox.className = "dropContainer";
document.body.appendChild(dropBox);
function deleteDropBox()
var element1 = document.getElementById("dropBox1");
var element2 = document.getElementById("dropBox2");
var element3 = document.getElementById("dropBox3");
element1.parentNode.removeChild(element1);
element2.parentNode.removeChild(element2);
element3.parentNode.removeChild(element3);
javascript jquery-ui
asked Nov 10 at 15:08
Kohlkopf
134
When adding elements dynamically, you will want to initialize draggable and droppable after they are created.
– Twisty
Nov 10 at 21:10
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I am trying to drag and drop elements into a dropbox which is created via javascript. I want to display a message whenever i drop it in one of the blue dropboxes. Sadly, it doesn't work on the new object. If I create a canvas in html-code, it does work.
Thank you for your help!
JS fiddle: https://jsfiddle.net/tk8sLn9e/
HTML
<html>
<head>
<link rel="stylesheet" href="StyleSheet.css" />
<meta charset="utf-8" />
<title></title>
<script src="Scripts/jquery-3.3.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.12.1.js" type="text/javascript"></script>
<script src="JavaScript.js"></script>
</head>
<body>
<div class="outerContainer">
<div class="tile">Price</div>
<div class="tile">Shares Outstanding</div>
<div class="tile">Market Cap</div>
</div>
</body>
</html>
JS
$(document).ready(function ()
$('.tile').draggable(
helper: 'clone',
stack: ".tile",
start: function (event, ui) createDropBox() ,
stop: function (event, ui) deleteDropBox()
);
$('.dropContainer').droppable(
drop: function (event, ui) alert("alarm")
);
)
var dropBoxWidth = 200;
var dropBox1Height = 75;
var dropBoxHeight = 150;
var dropBox1X = 240;
var dropBox1Y = 10;
var dropBox2X = dropBox1X;
var dropBox2Y = dropBox1Y + dropBox1Height + 50;
var dropBox3X = dropBox1X + dropBoxWidth + 100;
var dropBox3Y = dropBox1Y;
function createDropBox()
drawRectangle(dropBox1X, dropBox1Y, dropBoxWidth, dropBox1Height, "dropBox1");
drawRectangle(dropBox2X, dropBox2Y, dropBoxWidth, dropBoxHeight, "dropBox2");
drawRectangle(dropBox3X, dropBox3Y, dropBoxWidth, dropBoxHeight, "dropBox3");
function drawRectangle(left, top, width, height, id)
var dropBox = document.createElement("canvas");
dropBox.style.position = "absolute";
dropBox.style.left = left + "px";
dropBox.style.top = top + "px";
dropBox.style.width = width + "px";
dropBox.style.height = height + "px";
dropBox.style.backgroundColor = "#d8ecf3";
dropBox.style.border = "solid lightblue";
dropBox.style.borderRadius = "10px";
dropBox.id = id;
dropBox.className = "dropContainer";
document.body.appendChild(dropBox);
function deleteDropBox()
var element1 = document.getElementById("dropBox1");
var element2 = document.getElementById("dropBox2");
var element3 = document.getElementById("dropBox3");
element1.parentNode.removeChild(element1);
element2.parentNode.removeChild(element2);
element3.parentNode.removeChild(element3);
javascript jquery-ui
asked Nov 10 at 15:08
Kohlkopf
134
I am trying to drag and drop elements into a dropbox which is created via javascript. I want to display a message whenever i drop it in one of the blue dropboxes. Sadly, it doesn't work on the new object. If I create a canvas in html-code, it does work.
Thank you for your help!
JS fiddle: https://jsfiddle.net/tk8sLn9e/
HTML
<html>
<head>
<link rel="stylesheet" href="StyleSheet.css" />
<meta charset="utf-8" />
<title></title>
<script src="Scripts/jquery-3.3.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.12.1.js" type="text/javascript"></script>
<script src="JavaScript.js"></script>
</head>
<body>
<div class="outerContainer">
<div class="tile">Price</div>
<div class="tile">Shares Outstanding</div>
<div class="tile">Market Cap</div>
</div>
</body>
</html>
JS
$(document).ready(function ()
$('.tile').draggable(
helper: 'clone',
stack: ".tile",
start: function (event, ui) createDropBox() ,
stop: function (event, ui) deleteDropBox()
);
$('.dropContainer').droppable(
drop: function (event, ui) alert("alarm")
);
)
var dropBoxWidth = 200;
var dropBox1Height = 75;
var dropBoxHeight = 150;
var dropBox1X = 240;
var dropBox1Y = 10;
var dropBox2X = dropBox1X;
var dropBox2Y = dropBox1Y + dropBox1Height + 50;
var dropBox3X = dropBox1X + dropBoxWidth + 100;
var dropBox3Y = dropBox1Y;
function createDropBox()
drawRectangle(dropBox1X, dropBox1Y, dropBoxWidth, dropBox1Height, "dropBox1");
drawRectangle(dropBox2X, dropBox2Y, dropBoxWidth, dropBoxHeight, "dropBox2");
drawRectangle(dropBox3X, dropBox3Y, dropBoxWidth, dropBoxHeight, "dropBox3");
function drawRectangle(left, top, width, height, id)
var dropBox = document.createElement("canvas");
dropBox.style.position = "absolute";
dropBox.style.left = left + "px";
dropBox.style.top = top + "px";
dropBox.style.width = width + "px";
dropBox.style.height = height + "px";
dropBox.style.backgroundColor = "#d8ecf3";
dropBox.style.border = "solid lightblue";
dropBox.style.borderRadius = "10px";
dropBox.id = id;
dropBox.className = "dropContainer";
document.body.appendChild(dropBox);
function deleteDropBox()
var element1 = document.getElementById("dropBox1");
var element2 = document.getElementById("dropBox2");
var element3 = document.getElementById("dropBox3");
element1.parentNode.removeChild(element1);
element2.parentNode.removeChild(element2);
element3.parentNode.removeChild(element3);
javascript jquery-ui
javascript jquery-ui
asked Nov 10 at 15:08
Kohlkopf
134
asked Nov 10 at 15:08
Kohlkopf
134
asked Nov 10 at 15:08
Kohlkopf
134
asked Nov 10 at 15:08
Kohlkopf
134
asked Nov 10 at 15:08
Kohlkopf
134
134
When adding elements dynamically, you will want to initialize draggable and droppable after they are created.
– Twisty
Nov 10 at 21:10
add a comment |
When adding elements dynamically, you will want to initialize draggable and droppable after they are created.
– Twisty
Nov 10 at 21:10
When adding elements dynamically, you will want to initialize draggable and droppable after they are created.
– Twisty
Nov 10 at 21:10
When adding elements dynamically, you will want to initialize draggable and droppable after they are created.
– Twisty
Nov 10 at 21:10
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
accepted
Take a look at the following code:
JavaScript
$(function()
var boxes = [
id: "dropBox1",
class: "dropContainer",
props:
top: 10,
left: 240,
width: 200,
height: 75
,
id: "dropBox2",
class: "dropContainer",
props:
top: 225,
left: 240,
width: 200,
height: 150
,
id: "dropBox3",
class: "dropContainer",
props:
top: 10,
left: 440,
width: 200,
height: 150
];
function drawRectangle(l, t, w, h, id, cn)
$("<div>",
id: id,
class: cn
)
.css(
position: "absolute",
top: t + "px",
left: l + "px",
width: w + "px",
height: h + "px",
"background-color": "#D8ECF3",
border: "10px solid lightblue"
)
.appendTo("body");
function makeDropTarget($t)
$t.droppable(
drop: function(event, ui)
console.log("DROP:", ui.draggable.text(), "ON:", $(this).attr("id"));
);
function createDropBoxes(d)
$.each(d, function(k, box)
console.log("Create Rect:", box);
drawRectangle(box.props.left, box.props.top, box.props.width, box.props.height, box.id, box.class);
makeDropTarget($("#" + box.id));
);
function deleteDropBoxes(d)
$.each(d, function(k, box)
$("#" + box.id).remove();
);
$('.tile').draggable(
helper: 'clone',
stack: ".tile",
start: function(event, ui)
createDropBoxes(boxes);
,
stop: function(event, ui)
deleteDropBoxes(boxes);
);
);
Working Example: https://jsfiddle.net/Twisty/wLrj3k08/
I would advise staying with either all native JavaScript or all jQuery. It becomes easier when you don't mix up the two in your code.
I would also advise containing all your box data in an Array of Objects. Makes it easier to iterate and store etc. It does not need to be as complex, yet this just makes it a bit easier to work with in my opinion.
Making good use of functions can help a lot. I like to trey and keep them simple so that they are easy to use in a lot of situations. So we have:
drawRectangle(l, t, w, h, id, cn)- makes and appends the<div>with the given propertiesmakeDropTarget($t)- using jQuery Object as a Target, make the target droppablecreateDropBoxes(d)- create en mass a number of drop boxes based on specific box data (Array of Objects)deleteDropBoxes(d)- delete en mass a number of drop boxes based on specific data (Array of Objects)
You may want to make a create and delete function for a single target, yet you can use this to do that too:
deleteDropBoxes([id: "dropBox1"]);
This would work to delete one of the drop targets by ID.
Hope this helps.
answered Nov 10 at 21:52
Twisty
12.6k11433
That worked! Greatly appreciate your overall feedback!
– Kohlkopf
Nov 11 at 17:59
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
accepted
Take a look at the following code:
JavaScript
$(function()
var boxes = [
id: "dropBox1",
class: "dropContainer",
props:
top: 10,
left: 240,
width: 200,
height: 75
,
id: "dropBox2",
class: "dropContainer",
props:
top: 225,
left: 240,
width: 200,
height: 150
,
id: "dropBox3",
class: "dropContainer",
props:
top: 10,
left: 440,
width: 200,
height: 150
];
function drawRectangle(l, t, w, h, id, cn)
$("<div>",
id: id,
class: cn
)
.css(
position: "absolute",
top: t + "px",
left: l + "px",
width: w + "px",
height: h + "px",
"background-color": "#D8ECF3",
border: "10px solid lightblue"
)
.appendTo("body");
function makeDropTarget($t)
$t.droppable(
drop: function(event, ui)
console.log("DROP:", ui.draggable.text(), "ON:", $(this).attr("id"));
);
function createDropBoxes(d)
$.each(d, function(k, box)
console.log("Create Rect:", box);
drawRectangle(box.props.left, box.props.top, box.props.width, box.props.height, box.id, box.class);
makeDropTarget($("#" + box.id));
);
function deleteDropBoxes(d)
$.each(d, function(k, box)
$("#" + box.id).remove();
);
$('.tile').draggable(
helper: 'clone',
stack: ".tile",
start: function(event, ui)
createDropBoxes(boxes);
,
stop: function(event, ui)
deleteDropBoxes(boxes);
);
);
Working Example: https://jsfiddle.net/Twisty/wLrj3k08/
I would advise staying with either all native JavaScript or all jQuery. It becomes easier when you don't mix up the two in your code.
I would also advise containing all your box data in an Array of Objects. Makes it easier to iterate and store etc. It does not need to be as complex, yet this just makes it a bit easier to work with in my opinion.
Making good use of functions can help a lot. I like to trey and keep them simple so that they are easy to use in a lot of situations. So we have:
drawRectangle(l, t, w, h, id, cn)- makes and appends the<div>with the given propertiesmakeDropTarget($t)- using jQuery Object as a Target, make the target droppablecreateDropBoxes(d)- create en mass a number of drop boxes based on specific box data (Array of Objects)deleteDropBoxes(d)- delete en mass a number of drop boxes based on specific data (Array of Objects)
You may want to make a create and delete function for a single target, yet you can use this to do that too:
deleteDropBoxes([id: "dropBox1"]);
This would work to delete one of the drop targets by ID.
Hope this helps.
answered Nov 10 at 21:52
Twisty
12.6k11433
That worked! Greatly appreciate your overall feedback!
– Kohlkopf
Nov 11 at 17:59
add a comment |
up vote
0
down vote
accepted
Take a look at the following code:
JavaScript
$(function()
var boxes = [
id: "dropBox1",
class: "dropContainer",
props:
top: 10,
left: 240,
width: 200,
height: 75
,
id: "dropBox2",
class: "dropContainer",
props:
top: 225,
left: 240,
width: 200,
height: 150
,
id: "dropBox3",
class: "dropContainer",
props:
top: 10,
left: 440,
width: 200,
height: 150
];
function drawRectangle(l, t, w, h, id, cn)
$("<div>",
id: id,
class: cn
)
.css(
position: "absolute",
top: t + "px",
left: l + "px",
width: w + "px",
height: h + "px",
"background-color": "#D8ECF3",
border: "10px solid lightblue"
)
.appendTo("body");
function makeDropTarget($t)
$t.droppable(
drop: function(event, ui)
console.log("DROP:", ui.draggable.text(), "ON:", $(this).attr("id"));
);
function createDropBoxes(d)
$.each(d, function(k, box)
console.log("Create Rect:", box);
drawRectangle(box.props.left, box.props.top, box.props.width, box.props.height, box.id, box.class);
makeDropTarget($("#" + box.id));
);
function deleteDropBoxes(d)
$.each(d, function(k, box)
$("#" + box.id).remove();
);
$('.tile').draggable(
helper: 'clone',
stack: ".tile",
start: function(event, ui)
createDropBoxes(boxes);
,
stop: function(event, ui)
deleteDropBoxes(boxes);
);
);
Working Example: https://jsfiddle.net/Twisty/wLrj3k08/
I would advise staying with either all native JavaScript or all jQuery. It becomes easier when you don't mix up the two in your code.
I would also advise containing all your box data in an Array of Objects. Makes it easier to iterate and store etc. It does not need to be as complex, yet this just makes it a bit easier to work with in my opinion.
Making good use of functions can help a lot. I like to trey and keep them simple so that they are easy to use in a lot of situations. So we have:
drawRectangle(l, t, w, h, id, cn)- makes and appends the<div>with the given propertiesmakeDropTarget($t)- using jQuery Object as a Target, make the target droppablecreateDropBoxes(d)- create en mass a number of drop boxes based on specific box data (Array of Objects)deleteDropBoxes(d)- delete en mass a number of drop boxes based on specific data (Array of Objects)
You may want to make a create and delete function for a single target, yet you can use this to do that too:
deleteDropBoxes([id: "dropBox1"]);
This would work to delete one of the drop targets by ID.
Hope this helps.
answered Nov 10 at 21:52
Twisty
12.6k11433
That worked! Greatly appreciate your overall feedback!
– Kohlkopf
Nov 11 at 17:59
add a comment |
up vote
0
down vote
accepted
up vote
0
down vote
accepted
Take a look at the following code:
JavaScript
$(function()
var boxes = [
id: "dropBox1",
class: "dropContainer",
props:
top: 10,
left: 240,
width: 200,
height: 75
,
id: "dropBox2",
class: "dropContainer",
props:
top: 225,
left: 240,
width: 200,
height: 150
,
id: "dropBox3",
class: "dropContainer",
props:
top: 10,
left: 440,
width: 200,
height: 150
];
function drawRectangle(l, t, w, h, id, cn)
$("<div>",
id: id,
class: cn
)
.css(
position: "absolute",
top: t + "px",
left: l + "px",
width: w + "px",
height: h + "px",
"background-color": "#D8ECF3",
border: "10px solid lightblue"
)
.appendTo("body");
function makeDropTarget($t)
$t.droppable(
drop: function(event, ui)
console.log("DROP:", ui.draggable.text(), "ON:", $(this).attr("id"));
);
function createDropBoxes(d)
$.each(d, function(k, box)
console.log("Create Rect:", box);
drawRectangle(box.props.left, box.props.top, box.props.width, box.props.height, box.id, box.class);
makeDropTarget($("#" + box.id));
);
function deleteDropBoxes(d)
$.each(d, function(k, box)
$("#" + box.id).remove();
);
$('.tile').draggable(
helper: 'clone',
stack: ".tile",
start: function(event, ui)
createDropBoxes(boxes);
,
stop: function(event, ui)
deleteDropBoxes(boxes);
);
);
Working Example: https://jsfiddle.net/Twisty/wLrj3k08/
I would advise staying with either all native JavaScript or all jQuery. It becomes easier when you don't mix up the two in your code.
I would also advise containing all your box data in an Array of Objects. Makes it easier to iterate and store etc. It does not need to be as complex, yet this just makes it a bit easier to work with in my opinion.
Making good use of functions can help a lot. I like to trey and keep them simple so that they are easy to use in a lot of situations. So we have:
drawRectangle(l, t, w, h, id, cn)- makes and appends the<div>with the given propertiesmakeDropTarget($t)- using jQuery Object as a Target, make the target droppablecreateDropBoxes(d)- create en mass a number of drop boxes based on specific box data (Array of Objects)deleteDropBoxes(d)- delete en mass a number of drop boxes based on specific data (Array of Objects)
You may want to make a create and delete function for a single target, yet you can use this to do that too:
deleteDropBoxes([id: "dropBox1"]);
This would work to delete one of the drop targets by ID.
Hope this helps.
answered Nov 10 at 21:52
Twisty
12.6k11433
Take a look at the following code:
JavaScript
$(function()
var boxes = [
id: "dropBox1",
class: "dropContainer",
props:
top: 10,
left: 240,
width: 200,
height: 75
,
id: "dropBox2",
class: "dropContainer",
props:
top: 225,
left: 240,
width: 200,
height: 150
,
id: "dropBox3",
class: "dropContainer",
props:
top: 10,
left: 440,
width: 200,
height: 150
];
function drawRectangle(l, t, w, h, id, cn)
$("<div>",
id: id,
class: cn
)
.css(
position: "absolute",
top: t + "px",
left: l + "px",
width: w + "px",
height: h + "px",
"background-color": "#D8ECF3",
border: "10px solid lightblue"
)
.appendTo("body");
function makeDropTarget($t)
$t.droppable(
drop: function(event, ui)
console.log("DROP:", ui.draggable.text(), "ON:", $(this).attr("id"));
);
function createDropBoxes(d)
$.each(d, function(k, box)
console.log("Create Rect:", box);
drawRectangle(box.props.left, box.props.top, box.props.width, box.props.height, box.id, box.class);
makeDropTarget($("#" + box.id));
);
function deleteDropBoxes(d)
$.each(d, function(k, box)
$("#" + box.id).remove();
);
$('.tile').draggable(
helper: 'clone',
stack: ".tile",
start: function(event, ui)
createDropBoxes(boxes);
,
stop: function(event, ui)
deleteDropBoxes(boxes);
);
);
Working Example: https://jsfiddle.net/Twisty/wLrj3k08/
I would advise staying with either all native JavaScript or all jQuery. It becomes easier when you don't mix up the two in your code.
I would also advise containing all your box data in an Array of Objects. Makes it easier to iterate and store etc. It does not need to be as complex, yet this just makes it a bit easier to work with in my opinion.
Making good use of functions can help a lot. I like to trey and keep them simple so that they are easy to use in a lot of situations. So we have:
drawRectangle(l, t, w, h, id, cn)- makes and appends the<div>with the given propertiesmakeDropTarget($t)- using jQuery Object as a Target, make the target droppablecreateDropBoxes(d)- create en mass a number of drop boxes based on specific box data (Array of Objects)deleteDropBoxes(d)- delete en mass a number of drop boxes based on specific data (Array of Objects)
You may want to make a create and delete function for a single target, yet you can use this to do that too:
deleteDropBoxes([id: "dropBox1"]);
This would work to delete one of the drop targets by ID.
Hope this helps.
answered Nov 10 at 21:52
Twisty
12.6k11433
answered Nov 10 at 21:52
Twisty
12.6k11433
answered Nov 10 at 21:52
Twisty
12.6k11433
answered Nov 10 at 21:52
Twisty
12.6k11433
12.6k11433
That worked! Greatly appreciate your overall feedback!
– Kohlkopf
Nov 11 at 17:59
add a comment |
That worked! Greatly appreciate your overall feedback!
– Kohlkopf
Nov 11 at 17:59
That worked! Greatly appreciate your overall feedback!
– Kohlkopf
Nov 11 at 17:59
That worked! Greatly appreciate your overall feedback!
– Kohlkopf
Nov 11 at 17:59
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53240255%2fcreating-an-object-in-javascript-that-can-be-target-to-droppable-from-jquery-ui%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
When adding elements dynamically, you will want to initialize draggable and droppable after they are created.
– Twisty
Nov 10 at 21:10