I have list which is display using web method in asp.net c#. The list gets display perfectly fine. Now what i want is when i am trying to use/drag that value and drop is some other place it shows me error.
<script type="text/javascript">
function dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
}
function dragging(event) {
// document.getElementById("demo").innerHTML = "The p element is being dragged";
}
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
console.log(ev);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
$(document).ready(function () {
var section = new Array();
//Drag Drop Start
//Drag Drop End
function getSectionData() {
$.ajax({
type: "POST",
url: "../Provider/webmethodcall.aspx/GetAllSectionConfiguration",
data: '',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
section = JSON.parse(data.d);
//var list = document.createElement('li');
var list = "";
$.each(section, function (i, jsondata) {
if (jsondata.CSectionType == '1') {
list += "<li>" + "TX ";
}
if (jsondata.CSectionType == '2') {
list += "<li>" + "# " ;
}
if (jsondata.CSectionType == '3') {
list += "<li>" + "D ";
}
//list += "<button id='dragToDiv' type='button' style='background: cornflowerblue;color: white;font - size: 15px;font - weight: bold;' data-toggle='modal' data-target='#myModal'>" + jsondata.CSectionName + "</button></li><br/>";
//list += "<button type='button' style='background: cornflowerblue;color: white;font - size: 15px;font - weight: bold;' data-toggle='modal' id='btn" + jsondata.CSectionName + "' data-section='" + jsondata.CSectionName + "' draggable='true'>" + jsondata.CSectionName + "</button></li><br/>";
list += '<a href="javascript:void(0);" class="remCF" data-marker="' + jsondata.CSectionName +'" draggable="true" ondrag="drag(event)">' + jsondata.CSectionName +'</a></li><br/>';
//$('#dragToDiv').draggable();
});
$("#sectionlist").append(list);
//List.innerHTML += ListUser
}
});
}
getSectionData();
$("#sectionlist").on('click', '.remCF', function () {
//Imp Start
marker_ref = $(this).attr('data-marker');
console.log(marker_ref);
});
});
</script>
Accroding to your description,I don't understand your requirment clearly.Do you want to drag the whole list?
I suggest you could create a new div.Your function is returning a string rather than the div node. appendChild can only append a node.
More details,you could refer to below codes:
<script type="text/javascript">
function dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
}
function dragging(event) {
// document.getElementById("demo").innerHTML = "The p element is being dragged";
}
function allowDrop(event) {
event.preventDefault();
}
function drag(event) {
event.dataTransfer.setData("Text", event.target.id);
console.log(event);
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
//event.target.appendChild(document.getElementById(data));
var s = document.createElement('div'); // is the node
s.innerHTML = document.getElementById(data).innerHTML;
document.getElementById('layer1').appendChild(s);
}
$(document).ready(function () {
var section = new Array();
//Drag Drop Start
//Drag Drop End
function getSectionData() {
$.ajax({
type: "POST",
url: "2164795.aspx/GetAllSectionConfiguration",
contentType: "application/json; charset=utf-8",
data:'',
dataType: "json",
success: function (data) {
section = JSON.parse(data.d);
//var list = document.createElement('li');
var list = "";
$.each(section, function (i, jsondata) {
if (jsondata.CSectionType == '1') {
list += "<li>" + "TX ";
}
if (jsondata.CSectionType == '2') {
list += "<li>" + "# ";
}
if (jsondata.CSectionType == '3') {
list += "<li>" + "D ";
}
//list += "<button id='dragToDiv' type='button' style='background: cornflowerblue;color: white;font - size: 15px;font - weight: bold;' data-toggle='modal' data-target='#myModal'>" + jsondata.CSectionName + "</button></li><br/>";
//list += "<button type='button' style='background: cornflowerblue;color: white;font - size: 15px;font - weight: bold;' data-toggle='modal' id='btn" + jsondata.CSectionName + "' data-section='" + jsondata.CSectionName + "' draggable='true'>" + jsondata.CSectionName + "</button></li><br/>";
list += '<a href="javascript:void(0);" id="' + jsondata.Id + '" class="remCF" data-marker="' + jsondata.CSectionName + '" ondragstart="dragStart(event)" draggable="true">' + jsondata.CSectionName + '</a></li><br/>';
//$('#dragToDiv').draggable();
});
$("#sectionlist").append(list);
//List.innerHTML += ListUser
}
});
}
getSectionData();
$("#sectionlist").on('click', '.remCF', function () {
//Imp Start
marker_ref = $(this).attr('data-marker');
console.log(marker_ref);
});
});
</script>
<div id="sectionlist">
</div>
<div class="container">
<div class="row">
<div class="col-xs-3 droptarget" id="layer1" ondrop="drop(event)" ondragover="allowDrop(event)">
<div style="border-top: 1px dashed #ffffff; margin: 15px 0px 30px 0px" class="pad">
<span class="badging bg-primary">Layer 1</span>
<br />
<div class="form-group" id="layer1sub">
<label for="FirstName">User Type:</label>
<p class="">
<asp:Literal ID="ltusertype" runat="server" Text="-"></asp:Literal>
</p>
</div>
</div>
</div>
<div class="col-xs-9">
</div>
</div>
</div>
Result:
Best regards,
Yijing Sun
.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
Member
16 Points
31 Posts
Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
Mar 07, 2020 10:09 AM|Programming and Design|LINK
I have list which is display using web method in asp.net c#. The list gets display perfectly fine. Now what i want is when i am trying to use/drag that value and drop is some other place it shows me error.
Here is the div where i wish to place the data.
I want to display the the DROP LINK value in the below code.
Contributor
3730 Points
1425 Posts
Re: Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'No...
Mar 09, 2020 08:36 AM|yij sun|LINK
Hi Programming and design,
Accroding to your description,I don't understand your requirment clearly.Do you want to drag the whole list?
I suggest you could create a new div.Your function is returning a string rather than the div node. appendChild can only append a node.
More details,you could refer to below codes:
Result:
Best regards,
Yijing Sun