0
일부 드래그 가능한 요소를 생성하는 페이지가 있습니다. 그러나 나는 파이어 폭스에 내가 크롬에 나는 내가 작성 항목을 눌러 새로운 요소를 생성 can.To 동안 그들을 끌어 얻을 수없는 것으로 나타났습니다 button.Here 내 코드즉석 요소에서 드래그 앤 드롭이 작동하지 않습니다. firefox
/*
* @param event A jquery event that occurs when an object is being dragged
*/
function dragStartHandler(event){
\t //e refers to a jQuery object
\t //that does not have dataTransfer property
\t //so we have to refer to the original javascript event
\t var originalEvent = event.originalEvent;
\t var currentElement = originalEvent.target;
\t console.log("Hack it");
\t console.log($(currentElement).data());
\t //We want to store the data-task-id of the object that is being dragged
\t originalEvent.dataTransfer.setData("text",$(currentElement).data("task-id"));
\t originalEvent.dataTransfer.effectAllowed = "move";
}
$(document).ready(function(){
\t //When a new task/item is creatted it is assigned a unique data attribute which is the task index
\t var taskIndex = 0;
\t $(".text-info").addClass("text-center");
\t $(".createTask").addClass("btn-block").on("click",function(){
\t \t //Find the category whict this button belongs to
\t \t var currentCategory = $(this).parent(".box");
\t \t var categoryId = currentCategory.data("category");
\t \t //Create a new task
\t \t var task = $("<div class='list-group-item droppable' draggable='true' data-task-id="+taskIndex+"></div>");
\t \t //Assign a data-task-id attribute and set its text
\t \t task.text("Data id = "+taskIndex);
\t \t taskIndex++;
\t \t task.appendTo($(this).prev(".dropTarget"));
\t });
\t $(".droppable").on("dragstart",dragStartHandler);
\t $(".dropTarget").on("dragenter",function(event){
\t \t event.preventDefault();
\t \t event.stopPropagation();
\t \t $(this).addClass("highlighted-box");
\t }).on("dragover",false)
\t .on("drop",function(event){
\t \t event.preventDefault();
\t \t event.stopPropagation();
\t \t var originalEvent = event.originalEvent;
\t \t //Retrieve the data-task-id we stored in the event
\t \t var taskId = originalEvent.dataTransfer.getData("text");
\t \t console.log(taskId);
\t \t //The object that will be moved is determined by the id we stored on the event parameter
\t \t var objectToMove =$("body").find(`[data-task-id='${taskId}']`);
\t \t console.log(objectToMove);
\t \t var category = $(this).parent(".box").data("category");
\t \t objectToMove.data("category-group",category);
\t \t //Remove the square object from its previous position
\t \t //and append it to the current dropTarget
\t \t $(objectToMove).appendTo(this);
\t \t return false;
\t });
});.highlighted-box {
box-shadow: 0 0 4px 4px #EBE311;
}
.dropTarget {
height: 10em;
width: 10em;
/* border:2px solid; */
margin: auto;
}
.dropTarget .droppable{
\t margin: auto;
\t position: relative;
\t top: 20%;
}
.droppable {
background-color: dodgerblue;
/* height: 6em;
border-radius: 5px; */
/* box-shadow: 0 0 5px 5px #3D0404; */
/* width: 6em; */
}
#square2{
\t background-color: red;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<body>
\t <div class="jumbotron intro text-center">
\t \t <h1>Drag and drop demo</h1>
\t </div>
\t <div class="row">
\t \t <div class="col-md-3 box" data-category="0">
\t \t \t <h1 class="text-info">Ideas</h1>
\t \t \t <div class="dropTarget list-group">
\t \t \t </div>
\t \t \t <div class="btn btn-info createTask">
\t \t \t \t Create item
\t \t \t </div>
\t \t </div>
\t \t <div class="col-md-3 box" data-category="1">
\t \t \t <h1 class="text-info">Wornking on</h1>
\t \t \t <div class="dropTarget list-group">
\t \t \t </div>
\t \t \t <div class="btn btn-info createTask">
\t \t \t \t Create item
\t \t \t </div>
\t \t </div>
\t \t <div class="col-md-3 box" data-category="2">
\t \t \t <h1 class="text-info">Completed</h1>
\t \t \t <div class="dropTarget list-group">
\t \t \t </div>
\t \t \t <div class="btn btn-info createTask">
\t \t \t \t Create item
\t \t \t </div>
\t \t </div>
\t \t <div class="col-md-3 box" data-category="3">
\t \t \t <h1 class="text-info">Accepted</h1>
\t \t \t <div class="dropTarget list-group">
\t \t \t </div>
\t \t \t <div class="btn btn-info createTask">
\t \t \t \t Create item
\t \t \t </div>
\t \t </div>
\t </div>
\t <div class="container">
\t \t <div class="row">
\t \t \t <div class="col-md-6">
\t \t \t \t <div id="square" draggable="true" data-index = "0" class="droppable list-group-item"></div>
\t \t \t </div>
\t \t \t <div class="col-md-6">
\t \t \t \t <div id="square2" class="droppable list-group-item" draggable="true" data-index="1"></div>
\t \t \t </div>
\t \t </div>
\t </div>
</body>
더 자세한 내용을 찾거나 위임 이벤트 핸들러를 사용할 수 있습니다 –