<!doctype html>
<html>
<head>
<title>Hello, World!</title>
<style>
*{
margin:0;
padding:0;
font-family: sans-serif;
}
body{
background :#928cff;
display: flex;
justify-content: center;
align-items: center;
height : 100vh;
flex-direction: column;
gap : 30px;
}
.input{
background : #fff;
padding: 10px;
border-radius:10px;
width:300px;
height:120px;
display: flex;
flex-direction:column;
gap:30px;
justify-content:center;
align-items:center;
}
h2{
font-size: 32px;
}
.date{
display:flex;
flex-direction:column;
width: 80%;
gap:4px;
}
.date input{
outline:none;
padding:4px;
border: 1px solif #928cff;
}
.date button{
background : #928cff;
color : #fff;
border : none;
cursor : pointer;
padding : 5px;
}
.list{
display : flex;
justify-content: space-around;
width: 100%;
align-items: flex-start;
}
.box{
background: #fff;
padding:10px;
border-radius:10px;
width:200px;
}
.item{
background: #928cff;
padding : 10px;
margin : 4px;
cursir : move;
color : #fff;
}
</style>
</head>
<body>
<div class="input">
<h2>Add text</h2>
<div class="date">
<input type="text" id="inp"> <button id="btn">Add</button>
</div>
</div>
<div class="list">
<div class="box">
<h2>box</h2>
</div>
<div class="box">
<h2>box</h2>
</div>
<div class="box">
<h2>box</h2>
</div>
<div class="box">
<h2>box</h2>
</div>
</div>
<script>
let inp =document.getElementById('inp');
let btn = document.getElementById('btn');
let boxs =document.querySelectorAll('.box');
btn.onclick = function(){
if(inp.value != ''){
boxs[0].innerHTML +=`
<div class='item' draggable = 'true' >
${inp.value}
</div>
`
inp.value =null;
}
dragItem();
}
function dragItem(){
let items = document.querySelectorAll('.item');
items.forEach(item =>{
item.addEventListener('tuochstart',function(){
concole.log('drag is start');
})
})
}
</script>
</body>
</html>
اولا شكرا جزيلا اخي الكريم وجزاك الله كل خير
قمت بإضافة الكود كامل