Yes, this can be achieved.
(Although -- as pointed out by others -- it may not be the most ideal approach)
If we consider that the content is arranged vertically with: before -> content -> after
We can determine the drop point in relation to the container and then, based on the height of the generated content, ascertain whether the element was dropped before or after the designated zone.
Furthermore, javascript has the capability to access css properties of pseudo-elements.
This can be done using Window.getComputedStyle()
Syntax: (from MDN)
var style = window.getComputedStyle(element[, pseudoElt]);
pseudoElt Optional
A string specifying the pseudo-element to match.
Must be omitted (or null) for regular elements.
For example, to retrieve the height of the generated content before a section (referred to as 'target'):
window.getComputedStyle(target, ':before').height
Check out this Demo snippet:
var elem = document.getElementById("el");
var target = document.getElementById("target");
var targetHeight = parseFloat(window.getComputedStyle(target).height);
var beforeHeight = parseFloat(window.getComputedStyle(target, ':before').height);
var afterHeight = parseFloat(window.getComputedStyle(target, ':after').height);
elem.addEventListener("drag", function(e) {
document.body.classList.remove('dropped');
});
target.addEventListener("dragover", function(e) {
this.textContent = "dragging over section";
document.body.classList.add('dragging-over');
addBeforeAfterClasses(e);
});
target.addEventListener("dragleave", function(e) {
document.body.classList.remove('dragging-over');
this.textContent = "section";
e.currentTarget.style.background = "none";
});
target.addEventListener("drop", function(e) {
document.body.classList.add('dropped');
addBeforeAfterClasses(e);
this.textContent = "successfully dropped!";
});
function addBeforeAfterClasses(e) {
var dropOffsetTopWithRespectToContainer = e.clientY - target.offsetTop;
if(dropOffsetTopWithRespectToContainer <= beforeHeight) {
document.body.classList.add('before');
} else {
document.body.classList.remove('before');
}
if(dropOffsetTopWithRespectToContainer > targetHeight - beforeHeight) {
document.body.classList.add('after');
} else {
document.body.classList.remove('after');
}
}
target.ondrop = drop_handler;
target.ondragover = dragover_handler;
function drop_handler(e) {
e.preventDefault();
}
function dragover_handler(e) {
e.preventDefault();
}
.section {
margin: 10px;
position: relative;
}
.section:before,
.section:after {
content: "[insert here]";
height: 64px;
line-height: 56px;
width: 100%;
display: block;
border: 3px dashed #aaa;
}
.dragging-over.before .section:before {
content: "[drop into before]";
border-color: green;
}
.dragging-over.after .section:after {
content: "[drop into after]";
border-color: green;
}
.dropped.before .section:before {
content: "[dropped into before]";
background-color: green;
color: white;
}
.dropped.after .section:after {
content: "[dropped into after]";
background-color: green;
color: white;
}
.elem {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: maroon;
margin: 0 20px;
display: inline-block;
}
<div id="target" class="section">section</div>
<span>drag me:</span>
<div id="el" draggable="true" class="elem"></div>