拖放不适用于动态元素Firefox
[英]Drag and drop not working for on the fly elements firefox
问题描述
我有一个页面，生成一些可拖动的元素。 但是我注意到在Firefox上我无法拖动它们，而在chrome上却可以拖动它们。要创建新元素，请按创建项目按钮。这是我的代码
/* * @param event A jquery event that occurs when an object is being dragged */ function dragStartHandler(event){ //e refers to a jQuery object //that does not have dataTransfer property //so we have to refer to the original javascript event var originalEvent = event.originalEvent; var currentElement = originalEvent.target; console.log("Hack it"); console.log($(currentElement).data()); //We want to store the data-task-id of the object that is being dragged originalEvent.dataTransfer.setData("text",$(currentElement).data("task-id")); originalEvent.dataTransfer.effectAllowed = "move"; } $(document).ready(function(){ //When a new task/item is creatted it is assigned a unique data attribute which is the task index var taskIndex = 0; $(".text-info").addClass("text-center"); $(".createTask").addClass("btn-block").on("click",function(){ //Find the category whict this button belongs to var currentCategory = $(this).parent(".box"); var categoryId = currentCategory.data("category"); //Create a new task var task = $("<div class='list-group-item droppable' draggable='true' data-task-id="+taskIndex+"></div>"); //Assign a data-task-id attribute and set its text task.text("Data id = "+taskIndex); taskIndex++; task.appendTo($(this).prev(".dropTarget")); }); $(".droppable").on("dragstart",dragStartHandler); $(".dropTarget").on("dragenter",function(event){ event.preventDefault(); event.stopPropagation(); $(this).addClass("highlighted-box"); }).on("dragover",false) .on("drop",function(event){ event.preventDefault(); event.stopPropagation(); var originalEvent = event.originalEvent; //Retrieve the data-task-id we stored in the event var taskId = originalEvent.dataTransfer.getData("text"); console.log(taskId); //The object that will be moved is determined by the id we stored on the event parameter var objectToMove =$("body").find(`[data-task-id='${taskId}']`); console.log(objectToMove); var category = $(this).parent(".box").data("category"); objectToMove.data("category-group",category); //Remove the square object from its previous position //and append it to the current dropTarget $(objectToMove).appendTo(this); return false; }); });
.highlighted-box { box-shadow: 0 0 4px 4px #EBE311; } .dropTarget { height: 10em; width: 10em; /* border:2px solid; */ margin: auto; } .dropTarget .droppable{ margin: auto; position: relative; top: 20%; } .droppable { background-color: dodgerblue; /* height: 6em; border-radius: 5px; */ /* box-shadow: 0 0 5px 5px #3D0404; */ /* width: 6em; */ } #square2{ 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> <div class="jumbotron intro text-center"> <h1>Drag and drop demo</h1> </div> <div class="row"> <div class="col-md-3 box" data-category="0"> <h1 class="text-info">Ideas</h1> <div class="dropTarget list-group"> </div> <div class="btn btn-info createTask"> Create item </div> </div> <div class="col-md-3 box" data-category="1"> <h1 class="text-info">Wornking on</h1> <div class="dropTarget list-group"> </div> <div class="btn btn-info createTask"> Create item </div> </div> <div class="col-md-3 box" data-category="2"> <h1 class="text-info">Completed</h1> <div class="dropTarget list-group"> </div> <div class="btn btn-info createTask"> Create item </div> </div> <div class="col-md-3 box" data-category="3"> <h1 class="text-info">Accepted</h1> <div class="dropTarget list-group"> </div> <div class="btn btn-info createTask"> Create item </div> </div> </div> <div class="container"> <div class="row"> <div class="col-md-6"> <div id="square" draggable="true" data-index = "0" class="droppable list-group-item"></div> </div> <div class="col-md-6"> <div id="square2" class="droppable list-group-item" draggable="true" data-index="1"></div> </div> </div> </div> </body>
1 个解决方案
解决方案1
0 已采纳 2017-03-20 11:42:17
我的代码的问题是事件委托。 为了解决这个问题，我做了以下工作：
$("body").on("dragstart",".droppable",dragStartHandler);
在这里，你可以找到更多更在这里
jQuery拖放在firefox中不起作用，但在chrome和IE中起作用
[英]JQuery drag and drop not working in firefox but works in chrome and and IE
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.