من کدها رو تغببر دادم و الان برنامه درست شده یعنی هم سرچ میکنه هم اینکه درگ کردن رو بدرستی انجام میده.اما الان یه مشکل دارم اونم اینه که چطور تو این کد میتونم input رو هم اضافه کنم که در Selectedproduct اینپوت باکس هم نوشته بشه.
<style type="text/css">
table, td {
background-color: azure;
border: double;
}
#dvright, #dvleft {
background-color: azure;
height: 600px;
width: 300px;
}
#draggable {
width: 400px;
height: 20px;
text-align: center;
background: white;
}
.dropzone {
width: 600px;
height: 200px;
background: blueviolet;
margin-bottom: 10px;
padding: 10px;
}
</style>
<table>
<tr>
<td>
<h1>Product List</h1>
</td>
<td>
<h1>Selected Products</h1>
</td>
</tr>
<tr>
<td>
<input id="autoSearch" list="lstproducts" placeholder="جستجو..." />
<div id="dvleft">
<div class="dropzone">
<ul id="lstproducts"></ul>
</div>
</div>
</td>
<td>
<div class="dropzone"></div>
@using (Html.BeginForm("AddStuffFood", "Admin", FormMethod.Post, new { enctype = "multipart/form-data", id = "myUploadForm" }))
{
<div id="dvright" >
<ul id="lstselectedproducts"></ul>
</div>
<section id="content">
<div class="container">
<div class="col-lg-12">
<div class="row">
<div class="editor-field marginbot20 ">
@Html.TextBoxFor(model => model.Food.Title, new { placeholder = "نام غذا", @class = "form-control input-lg" })
@Html.ValidationMessageFor(model => model.Food.Title)
</div>
<div class="editor-field marginbot20">
@Html.TextBoxFor(model => model.Food.Type, new { placeholder = "نوع غذا", @class = "form-control input-lg" })
@Html.ValidationMessageFor(model => model.Food.Type)
</div>
<div class="editor-field marginbot20">
@Html.TextAreaFor(model => model.Food.FullText, new { placeholder = "دستور پخت", @class = "form-control input-lg" })
@Html.ValidationMessageFor(model => model.Food.FullText)
</div>
<div class="editor-field marginbot20 ">
@Html.TextBoxFor(model => model.Food.TimetoCook, new { placeholder = "مدت زمان پخت", @class = "form-control input-lg" })
@Html.ValidationMessageFor(model => model.Food.TimetoCook)
</div>
<div class="editor-field marginbot20 ">
@Html.TextBoxFor(model => model.Food.TimetoPrepare, new { placeholder = "مدت زمان آماده سازی ", @class = "form-control input-lg" })
@Html.ValidationMessageFor(model => model.Food.TimetoPrepare)
</div>
<div class="editor-field marginbot20 ">
@Html.TextBoxFor(model => model.Food.ForMember, new { placeholder = " تعداد نفرات", @class = "form-control input-lg" })
@Html.ValidationMessageFor(model => model.Food.ForMember)
</div>
<div class="editor-field marginbot20 ">
@Html.TextBoxFor(model => model.Food.LevelFood, new { placeholder = "سطح مهارت", @class = "form-control input-lg" })
@Html.ValidationMessageFor(model => model.Food.LevelFood)
</div>
<div class="margintop20">
@Html.Upload("UploadImage")
@Html.ValidationMessageFor(model => model.Food.Image)
</div>
</div>
</div>
</div>
</section> <button class="btn btn-theme btn-block btn-lg">افزودن</button>
}
</td>
</tr>
</table>
$('#autoSearch').on("input", function () {
var str = $('#autoSearch').val();
getData(str);
});
function getData(str) {
var items = "";
$.ajax({
url: "/Admin/GetData",
data: { "str": str },
type: "GET",
}).done(function (resp) {
$.each(resp, function (idx, val) {
// items += " <li >" + val.Name + val.Id + "</li>";
items += "<li id='draggable' draggable='true' ondragstart='event.dataTransfer.setData('text/plain',null)'>" + val.Name + val.Id + "</li>"+ "<input type='text'draggable='true' ondragstart='event.dataTransfer.setData('text/plain',null)'/>";
});
$("#lstproducts").html(items);
}).error(function (err) {
alert("Error! " + err.status);
});
}
var dragged ;
/* events fired on the draggable target */
document.addEventListener("drag", function (event) {
}, false);
document.addEventListener("dragstart", function (event) {
// store a ref. on the dragged elem
dragged = event.target;
//alert(event.target);
// make it half transparent
event.target.style.opacity = .5;
}, false);
document.addEventListener("dragend", function (event) {
// reset the transparency
event.target.style.opacity = "";
}, false);
/* events fired on the drop targets */
document.addEventListener("dragover", function (event) {
// prevent default to allow drop
event.preventDefault();
}, false);
document.addEventListener("dragenter", function (event) {
// highlight potential drop target when the draggable element enters it
if (event.target.className == "dropzone") {
event.target.style.background = "purple";
}
}, false);
document.addEventListener("dragleave", function (event) {
// reset background of potential drop target when the draggable element leaves it
if (event.target.className == "dropzone") {
event.target.style.background = "";
}
}, false);
document.addEventListener("drop", function (event) {
// prevent default action (open as link for some elements)
event.preventDefault();
// move dragged elem to the selected drop target
if (event.target.className == "dropzone") {
event.target.style.background = "";
dragged.parentNode.removeChild(dragged);
event.target.appendChild(dragged);
}
}, false);
