Podes fazer isso juntando duas linhas:
var valorOrigem = original.nextElementSibling.textContent;
div.nextElementSibling.value = Number(div.nextElementSibling.value) + Number(valorOrigem);
//Drag'n Drop functions
var elementCounter = 0; // Para designar a ID do elemento dropado.
function allowDrop(ev) {
if (ev.target.getAttribute("droppable") == "false") {
ev.dataTransfer.dropEffect = "none"; // dropping is not allowed
ev.preventDefault();
} else {
ev.dataTransfer.dropEffect = "all"; // drop it like it's hot
ev.preventDefault();
}
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
ev.dataTransfer.effectAllowed = "copy";
}
function drop(ev, div) {
ev.preventDefault();
var x = ev.clientX;
var y = ev.clientY;
var data = ev.dataTransfer.getData("text");
var copyimg = document.createElement("img");
var original = document.getElementById(data);
var valorOrigem = original.nextElementSibling.textContent;
div.nextElementSibling.value = Number(div.nextElementSibling.value) + Number(valorOrigem);
var altura = document.getElementById("drag1").height;
var largura = document.getElementById("drag1").width;
var c = x - largura;
var d = y - altura;
copyimg.src = original.src;
div.appendChild(copyimg);
if (original.parentNode.id == "conteudo") {
if (ev.target.tagName == "IMG") { // Se a imagem estiver dropando em uma imagem
console.log(ev.target.tagName);
original.parentNode.removeChild(original);
copyimg.id = "dropped_elem" + (++elementCounter);
copyimg.setAttribute("style", "position: fixed; top: " + (y - 50) + "px; left:" + (x - 70) + "px;");
copyimg.setAttribute('draggable', true);
copyimg.setAttribute('ondragstart', "drag(event)");
} else { // Se não, é porque a imagem está sendo dropada em uma div
original.parentNode.removeChild(original);
copyimg.id = "dropped_elem" + (++elementCounter);
copyimg.setAttribute("style", "position: fixed; top: " + (y - 50) + "px; left:" + (x - 50) + "px;");
copyimg.setAttribute('draggable', true);
copyimg.setAttribute('ondragstart', "drag(event)");
}
} else {
if (ev.target.tagName == "DIV") { // Se a imagem está sendo movimentada dentro da div conteudo
copyimg.id = "dropped_elem" + (++elementCounter);
copyimg.setAttribute("style", "position: fixed; top: " + (y - 50) + "px; left:" + (x - 50) + "px;");
copyimg.setAttribute('draggable', true);
copyimg.setAttribute('ondragstart', "drag(event)");
} else { // Se não, é porque está sendo dropada na IMG
console.log(ev.target.tagName);
copyimg.id = "dropped_elem" + (++elementCounter);
copyimg.setAttribute("style", "position: fixed; top: " + (y - 50) + "px; left:" + (x - 70) + "px;");
copyimg.setAttribute('draggable', true);
copyimg.setAttribute('ondragstart', "drag(event)");
}
}
}
.conteudo-externo {
width: 55%;
height: 60%;
z-index: 3;
background: red;
border: 1px solid;
float: left;
}
.conteudo {
width: 320px;
height: 300px;
border-radius: 50%;
border: 1px solid #000;
z-index: 5;
background: blue;
margin: 35px auto;
}
.img {
z-index: 1;
width: 130px;
height: 130px background-position:center;
opacity: 0.5;
}
#fundo1 {
width: 200px;
height: 200px;
z-index: 3;
background: blue;
border: 1px solid;
float: left;
}
#fundo2 {
width: 200px;
height: 200px;
z-index: 3;
background: yellow;
border: 1px solid;
float: left;
}
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Biblioetca JQuery -->
</head>
<body>
<div class="conteudo-externo" id="conteudo-externo">
<div id="conteudo" class="conteudo" ondrop="drop(event, this)" ondragover="allowDrop(event)">
</div>
<input id="totalizador" name="totalizador" class="text" size="1" type="text" readonly="true" value="0" maxlength="999999" style=";border:0px solid #fff" /> <br>
</div>
<div id="fundo1">
<img id="drag1" src="http://a.deviantart.net/avatars/i/n/indistinguishable.png?2" draggable="true" ondragstart="drag(event)" alt="" />
<div id="valor1" class="valFundo1"> 1 </div>
</div>
<div id="fundo2">
<img id="drag2" src="http://a.deviantart.net/avatars/i/n/indistinguishable.png?2" draggable="true" ondragstart="drag(event)" alt="" />
<div id="valor2" class="valFundo2"> 2 </div>
</div>
</body>
</html>
Olhando para o código há muita repetição... isso pode ser feito com menos código. Uma sugestão seria:
//Drag'n Drop functions
var elementCounter = 0; // Para designar a ID do elemento dropado.
var originalElement;
function onDragOver(ev) {
var isDroppable = ev.target.getAttribute("droppable") !== "false";
ev.dataTransfer.dropEffect = isDroppable ? "all" : "none";
ev.preventDefault();
}
function onDragStart(ev) {
originalElement = ev.target;
ev.dataTransfer.setDragImage(originalElement, 15, 15);
}
function getCoords(ev) {
var mouseCoords = {
x: ev.clientX,
y: ev.clientY
}
return mouseCoords
}
function drop(ev) {
var valorOrigem = originalElement.nextElementSibling.textContent;
var input = ev.target.nextElementSibling;
input.value = Number(input.value) + Number(valorOrigem);
var clone = originalElement.cloneNode(true);
var mouseCoords = getCoords(ev);
clone.style.left = mouseCoords.x - 15 + 'px';
clone.style.top = mouseCoords.y - 15 + 'px';
ev.target.appendChild(clone);
}
.conteudo-externo {
width: 55%;
height: 60%;
z-index: 3;
background: red;
border: 1px solid;
float: left;
}
.conteudo {
width: 320px;
height: 300px;
border-radius: 50%;
border: 1px solid #000;
z-index: 5;
background: blue;
margin: 35px auto;
}
.conteudo [draggable] {
position: absolute;
}
.img {
z-index: 1;
width: 130px;
height: 130px background-position:center;
opacity: 0.5;
}
#fundo1 {
width: 200px;
height: 200px;
z-index: 3;
background: blue;
border: 1px solid;
float: left;
}
#fundo2 {
width: 200px;
height: 200px;
z-index: 3;
background: yellow;
border: 1px solid;
float: left;
}
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Biblioetca JQuery -->
</head>
<body>
<div class="conteudo-externo" id="conteudo-externo">
<div id="conteudo" class="conteudo" ondrop="drop(event, this)" ondragover="onDragOver(event)">
</div>
<input id="totalizador" name="totalizador" class="text" size="1" type="text" readonly="true" value="0" maxlength="999999" style=";border:0px solid #fff" /> <br>
</div>
<div id="fundo1">
<img src="http://a.deviantart.net/avatars/i/n/indistinguishable.png?2" draggable="true" ondragstart="onDragStart(event)" alt="" />
<div id="valor1" class="valFundo1"> 1 </div>
</div>
<div id="fundo2">
<img src="http://a.deviantart.net/avatars/i/n/indistinguishable.png?2" draggable="true" ondragstart="onDragStart(event)" alt="" />
<div id="valor2" class="valFundo2"> 2 </div>
</div>
</body>
</html>