<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>DRAG & DROP</title>
<script type="text/javascript">
//<![CDATA[
//try{if (!window.CloudFlare) {var CloudFlare=[{verbose:0,p:0,byc:0,owlid:"cf",bag2:1,mirage2:0,oracle:0,paths:{cloudflare:"/cdn-cgi/nexp/dok3v=1613a3a185/"},atok:"e249f4e174edf7af03a74bc76c145d98",petok:"4a10f38bb2d4b46c1cff3e9e6e64e00d2795f082-1436193605-1800",zone:"oc-static.com",rocket:"0",apps:{}}];CloudFlare.push({"apps":{"ape":"4a1bcba3f7297e6bc2869c4a33323412"}});!function(a,b){a=document.createElement("script"),b=document.getElementsByTagName("script")[0],a.async=!0,a.src="//ajax.cloudflare.com/cdn-cgi/nexp/dok3v=7e13c32551/cloudflare.min.js",b.parentNode.insertBefore(a,b)}()}}catch(e){};
//]]>
</script>
<style>
.dropper {
display: inline-block;
margin: 50px 10px 10px 50px;
vertical-align: top;
background-color: #555;
border: 1px solid #111;
-moz-border-radius: 10px;
border-radius: 10px;
-moz-transition: all 200ms linear;
-webkit-transition: all 200ms linear;
-o-transition: all 200ms linear;
transition: all 200ms linear;
}
.drop_hover {
-moz-box-shadow: 0 0 30px rgba(0, 0, 0, 0.8) inset;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.8) inset;
}
.draggable {
display: inline-block;
margin: 20px 10px 10px 20px;
padding-top: 20px;
width: 60px;
height: 30px;
color: #3D110F;
background-color: #822520;
border: 4px solid #3D110F;
text-align: center;
font-size: 1em;
cursor: move;
-moz-transition: all 200ms linear;
-webkit-transition: all 200ms linear;
-o-transition: all 200ms linear;
transition: all 200ms linear;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}
</style>
</head>
<body>
<div class="dropper">
<div class="draggable">Block1</div>
<div class="draggable">Block2</div>
<div class="draggable">Block3</div>
</div>
<div class="dropper">
</div>
<script>
var x=document.querySelectorAll('.dropper');
x[0].style.height="600px";
x[0].style.width="200px";
x[1].style.height="600px";
x[1].style.width="999px";
</script>
<script>
(function() {
var dndHandler = {
draggedElement: null, // Propriété pointant vers l'élément en cours de déplacement
applyDragEvents: function(element) {
element.draggable = true;
var dndHandler = this; // Cette variable est nécessaire pour que l'événement « dragstart » ci-dessous accède facilement au namespace « dndHandler »
element.addEventListener('dragstart', function(e) {
dndHandler.draggedElement = e.target; // On sauvegarde l'élément en cours de déplacement
e.dataTransfer.setData('text/plain', ''); // Nécessaire pour Firefox
}, false);
},
applyDropEvents: function(dropper) {
dropper.addEventListener('dragover', function(e) {
e.preventDefault(); // On autorise le drop d'éléments
this.className = 'dropper drop_hover'; // Et on applique le style adéquat à notre zone de drop quand un élément la survole
}, false);
dropper.addEventListener('dragleave', function() {
this.className = 'dropper'; // On revient au style de base lorsque l'élément quitte la zone de drop
});
var dndHandler = this; // Cette variable est nécessaire pour que l'événement « drop » ci-dessous accède facilement au namespace « dndHandler »
dropper.addEventListener('drop', function(e) {
var target = e.target,
draggedElement = dndHandler.draggedElement, // Récupération de l'élément concerné
clonedElement = draggedElement.cloneNode(true); // On créé immédiatement le clone de cet élément
while (target.className.indexOf('dropper') == -1) { // Cette boucle permet de remonter jusqu'à la zone de drop parente
target = target.parentNode;
}
target.className = 'dropper'; // Application du style par défaut
clonedElement = target.appendChild(clonedElement); // Ajout de l'élément cloné à la zone de drop actuelle
dndHandler.applyDragEvents(clonedElement); // Nouvelle application des événements qui ont été perdus lors du cloneNode()
draggedElement.parentNode.removeChild(clonedElement); // Suppression de l'élément d'origine
});
}
};
var elements = document.querySelectorAll('.draggable'),
elementsLen = elements.length;
for (var i = 0 ; i < elementsLen ; i++) {
dndHandler.applyDragEvents(elements[i]); // Application des paramètres nécessaires aux éléments déplaçables
}
var droppers = document.querySelectorAll('.dropper'),
droppersLen = droppers.length;
//for (var i = 0 ; i < droppersLen ; i++) {
dndHandler.applyDropEvents(droppers[1]); // Application des événements nécessaires aux zones de drop
//}
})();
</script>
</body>
</html>
我开始使用html / css / jquery / jscript编程。我不得不做两个街区。我们可以从左侧块中拖动元素以将它们放在右侧。我们不能做对立面。除此之外，拖动时不会删除左侧的元素。这是我的代码：
(function() {
var dndHandler = {
draggedElement: null, // Propriété pointant vers l'élément en cours de déplacement
applyDragEvents: function(element) {
element.draggable = true;
var dndHandler = this; // Cette variable est nécessaire pour que l'événement « dragstart » ci-dessous accède facilement au namespace « dndHandler »
element.addEventListener('dragstart', function(e) {
dndHandler.draggedElement = e.target; // On sauvegarde l'élément en cours de déplacement
e.dataTransfer.setData('text/plain', ''); // Nécessaire pour Firefox
}, false);
},
applyDropEvents: function(dropper) {
dropper.addEventListener('dragover', function(e) {
e.preventDefault(); // On autorise le drop d'éléments
this.className = 'dropper drop_hover'; // Et on applique le style adéquat à notre zone de drop quand un élément la survole
}, false);
dropper.addEventListener('dragleave', function() {
this.className = 'dropper'; // On revient au style de base lorsque l'élément quitte la zone de drop
});
var dndHandler = this; // Cette variable est nécessaire pour que l'événement « drop » ci-dessous accède facilement au namespace « dndHandler »
dropper.addEventListener('drop', function(e) {
var target = e.target,
draggedElement = dndHandler.draggedElement, // Récupération de l'élément concerné
clonedElement = draggedElement.cloneNode(true); // On créé immédiatement le clone de cet élément
while (target.className.indexOf('dropper') == -1) { // Cette boucle permet de remonter jusqu'à la zone de drop parente
target = target.parentNode;
}
target.className = 'dropper'; // Application du style par défaut
clonedElement = target.appendChild(clonedElement); // Ajout de l'élément cloné à la zone de drop actuelle
dndHandler.applyDragEvents(clonedElement); // Nouvelle application des événements qui ont été perdus lors du cloneNode()
draggedElement.parentNode.removeChild(clonedElement); // Suppression de l'élément d'origine
});
}
};
var elements = document.querySelectorAll('.draggable'),
elementsLen = elements.length;
for (var i = 0 ; i < elementsLen ; i++) {
dndHandler.applyDragEvents(elements[i]); // Application des paramètres nécessaires aux éléments déplaçables
}
var droppers = document.querySelectorAll('.dropper'),
droppersLen = droppers.length;
//for (var i = 0 ; i < droppersLen ; i++) {
dndHandler.applyDropEvents(droppers[1]); // Application des événements nécessaires aux zones de drop
//}
})();}
我的问题是当元素位于右侧块时，它们位于内联块中。我希望能够将它们拖动到我想要的块中。 我找到了一种方法，可以让我的元素在任何我想要的地方都可以拖动。但它也适用于左侧块：
$(function() {
$( "#dg1" ).draggable();
});
我想要的是：当元素位于左侧块时，它们保持内联块。当我将它们拖到正确的区块时，我希望能够将它们放在我想要的区域中。
希望我的问题很清楚，谢谢你的回答！
$(function(){
$('.draggable').draggable({
revert: 'invalid',
opacity: 0.35,
helper: function(){
return $(this).clone().appendTo('#drop_in').css({'zIndex':5});
},
cursor: 'move',
//containment: '#drop_in'
});
$('#drop_in').droppable({
activeClass: 'ui-state-hover',
accept: '.draggable',
drop: function(event, ui){
if (!ui.draggable.hasClass("dropped"))
$(this).append($(ui.draggable).clone().addClass("dropped").draggable({containment: '#drop_in'}));
}
});
});
.draggable{
font-family: Tahoma, Geneva, sans-serif;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
border: 1p solid #999;
background: white;
width: 100px; height: 50px;
text-align: center;
margin: 20px 10px 10px 10px;
padding-top: 20px;
}
.dropper{
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
border: 1p solid #999;
background: -webkit-linear-gradient(left,#CCCCCC,#EEEEEE);
background: -moz-linear-gradient(#CCCCCC, #EEEEEE);
width: 600px; height: 200px;
padding-top: 20px;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Droppable </title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<div class="dropper" id="drag_from">
<div class="draggable">Drag me!</div>
<div class="draggable">Drag me too!</div>
</div>
<div class="dropper" id="drop_in">
</div>
</body>
</html>
我的问题是，当我拖动元素并将其放入滴管时，它不会掉落在鼠标放下的位置。但是在跌落后我可以操纵它并改变它的位置。如何在我的代码中更改它？
答案 0 :(得分：0)
由于您被分配为实习生，因此给出完整答案（包括完成的代码）将无法满足作业的目的：了解如何自己制作。看到你在这里提出这个问题而不是由你的主管帮助，我也感到惊讶; （s）他的任务是帮助你学习......
你（当前）拖动的东西实际上不是元素本身，它是拖动的一些浏览器可视化。 jQuery-UI的$ .draggable（）不会帮助你，因为它不允许你在任何其他元素上开始拖放（所以不在克隆元素上等）。
您可能希望使用jQuery编写自己的拖放代码，在这种情况下，以下函数可能会派上用场：
$(':hover');，您可以获取当前鼠标下的所有元素我个人会听取块上的mousedown，克隆当前块，将其添加到body并将其设置到正确的位置。
收听正文/文档上的mousemove和mouseup。将克隆元素相应移动到mousemove上的鼠标位置，然后删除mouseup上的克隆元素或将其添加到右侧区域。
我们现在对应这几天了。我们可以永远保持这种状态，但这也不会有任何意义。所以这里有一些示例代码，包括注释。请仔细研究并尝试理解“思维方式”。如果您有任何不理解的部分，请不要犹豫;）
!function(e){var n=!1,o=!0;e.elementFromPoint=function(t,l){if(!document.elementFromPoint)return null;if(!n){var m;(m=e(document).scrollTop())>0?o=null==document.elementFromPoint(0,m+e(window).height()-1):(m=e(document).scrollLeft())>0&&(o=null==document.elementFromPoint(m+e(window).width()-1,0)),n=m>0}return o||(t+=e(document).scrollLeft(),l+=e(document).scrollTop()),e(document.elementFromPoint(t,l))}}(jQuery);
//create a variable accessible between the events:
var dragging = { $element: null, offset: { left: 0, top: 0 } };
//listen for mousedown on .draggable inside .dropper#drag_from:
$('.dropper#drag_from').on('mousedown', '.draggable', function(event){
//prevent normal behaviour (selecting text etc.):
event.preventDefault();
//clone this .draggable element:
dragging.$element = $(this).clone();
//determine the position of the mouse relative to this .draggable element:
dragging.offset.left = event.pageX - $(this).offset().left;
dragging.offset.top = event.pageY - $(this).offset().top;
//set the element to `absolute` so it does not intervene with other elements, correct the position relative to the page, correct the margin and don't capture mouse events (necessary for $(':hover')):
dragging.$element.css({ position: 'absolute', left: event.pageX - dragging.offset.left, top: event.pageY - dragging.offset.top, margin: '0', 'pointer-events': 'none' });
//finally, append our cloned element to the body element of the page:
$('body').append(dragging.$element);
});
//listen to both mousemove and mouseup anywhere on the page:
$('body').on('mousemove', function(event) {
//only when dragging:
if(dragging.$element) {
event.preventDefault();
//move element to the correct position:
dragging.$element.css({ left: event.pageX - dragging.offset.left, top: event.pageY - dragging.offset.top });
}
}).on('mouseup', function(event) {
//only when dragging:
if(dragging.$element) {
//when hovering over the dropper:
if($.elementFromPoint(event.pageX, event.pageY).prop('id') == 'drop_in') {
//set location relative to the dropper:
dragging.$element.css({ left: event.pageX - $('.dropper#drop_in').offset().left - dragging.offset.left, top: event.pageY - $('.dropper#drop_in').offset().top - dragging.offset.top })
//move element from the body to the dropper:
$('.dropper#drop_in').append(dragging.$element);
} else {
//remove cloned element from document:
dragging.$element.remove();
}
//no longer dragging:
dragging.$element = null;
}
});html, body { width: 100%; height: 100%; }
.draggable{
position: relative;
float: left;
border-radius: 15px;
border: 1p solid #999;
background: white;
width: 100px;
height: 50px;
margin: 10px 0 0 10px;
padding-top: 20px;
font-family: Tahoma, Geneva, sans-serif;
text-align: center;
}
.dropper{
position: relative;
float: left;
border-radius: 15px;
border: 1p solid #999;
background: -webkit-linear-gradient(left,#CCCCCC,#EEEEEE);
background: -moz-linear-gradient(#CCCCCC, #EEEEEE);
width: 600px;
height: 600px;
margin: 50px 10px 10px 10px;
}
.dropper#drag_from{
width: 230px;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Droppable </title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div class="dropper" id="drag_from">
<div class="draggable">Drag me!</div>
<div class="draggable">Drag me too!</div>
</div>
<div class="dropper" id="drop_in"></div>
</body>
</html>
答案 1 :(得分：0)
你测试了Draggabilly插件吗？它很棒，功能齐全。我认为你的问题可以解决一些方法
http://draggabilly.desandro.com/
您可以拖动网格，父元素，拖动限制和事件操作。
祝你好运！