8 글 보임 - 1 에서 8 까지 (총 8 중에서)
-
안녕하세요 기능대회 문제를 풀던중 드래그 앤 드롭 관련하여 문제가 생겨 질문드립니다. 드래그앤 드롭은 잘되는데 가로로 되지 않고 세로로 됩니다. 혹시 이부분은 어떤 문제가 있을까요? 그리고 드래그 앤 드롭 했을 때 관련 예제와는 다른데 이부분도 따로 html로 구현이 필요한지 궁금합니다 ( 만약 필요하다면 드롭일때 그 html이 담기는 걸로 구현해야할까요?
<store.html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Store</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous"> <link rel="stylesheet" href="store.css"> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous" ></script> </head> </head> <body> <nav class="navbar navbar-expand-lg bg-light"> <div class="container-fluid"> 집꾸미기 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> Home <li class="nav-item"> 스토어 <li class="nav-item"> 시공견적 <form class="d-flex " role="search"> <input class="form-control me-2" type="text" id="search" onkeyup="filter()" placeholder="원하는 품목을 입력하세요" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form> </div> </div> </nav> <div class="container"> <div class="row product-list"> <!-- <div class="col-md-3"> < img src=""> <h4>상품명 : </h4> <p>가격 : </p> </div> --> </div> </div> <div class="cart"> <p class="cart-name">장바구니</p> <div class="cart-product" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">여기에 드래그하세요</div> </div> <script> var products=[ { "id": 0, "title": "식기세척기", "brand": "세척나라", "photo": "./images/pr1.jpg", "price": 10000 }, { "id": 1, "title": "원목 침대 프레임", "brand": "침대나라", "photo": "./images/pr2.jpg", "price": 20000 }, { "id": 2, "title": "천연 디퓨저 세트", "brand": "향기나라", "photo": "./images/pr3.jpg", "price": 30000 }, { "id": 3, "title": "시원한 서큘레이터", "brand": "바람나라", "photo": "images/pr4.jpg", "price": 40000 } ]
products.forEach((a,i)=>{ var Data=` <div class="card listinner" style="width: 20%;" id="drag1" draggable="true" ondragstart="drag(event)"> <img class="card-img" src="${products[i].photo}" alt="..."> <div class="card-body"> <h5 class="card-title">${products[i].title}</h5> <p class="card-brand">${products[i].brand}</> <h6 class="card-price">가격 : ${products[i].price}</h6> <button class="add btn btn-primary" data-id="${products[i].id}">담기</button> </div> </div>`; $('.product-list').append(Data)})function filter(){ let seacrch = document.getElementById("search").value.toLowerCase(); let listinner = document.querySelectorAll('.listinner') for (let i=0; i<=listinner.length; i++){ title = listinner[i].getElementsByClassName('card-title'); if(title[0].innerHTML.toLowerCase().includes(seacrch)){ listinner[i].style.display='flex' }else{ listinner[i].style.display='none' } } } //드래그앤 드랍 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> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script> </body> </html>애플쌤,,, 장바구니에 넣으면 해당 노란부분이 추가되는데 장바구니에 있는 상품은 담기를 없애고 input을 넣어서 수량으로 변경하려면 수량을 장바구니안에 관련태그가 있으면? 담기 버튼 숨기고 input 수량추가 이런식으로 코드를 구하는게 맞나요?
8 글 보임 - 1 에서 8 까지 (총 8 중에서)
- 답변은 로그인 후 가능합니다.