Ich habe einen Container mit smilies. Die sollen mit draggable in einen Input Feld gezogen werden.
Innerhalb des Containers kann man sie bewegen.
Aus dem Container herausgeht nicht, weil er am Container Rand stehen bleibt.
Habe schon versucht das beim drag Event den gezogenen Smilie ein Fixed zu geben ,was Theoretisch auch geht. Doch dazu müsste man wieder Maus Positionen und so weiter auslesen.
Habe auch bei der jQuery UI Seite mal geschaut ,doch ich finde irgendwie nix was mir dabei hilft.
Es soll auf jeden Fall ein Smilie mit ziehen oder klicken (klicken hat bei mir nicht geklappt ,bin zurzeit wohl zu blöd)
in das obere Input Feld gelangen.
Code
<style>
table{
height:50px;
background:#000066;
width:100%;
}
td:nth-child(1){
width:10%;
font-size:30px;
}
input{
width:100%;
height:30px;
}
#smile_content{
position:fixed;
top:130px;
margin:0 auto;
width:300px;
height:200px;
overflow:auto;
color:black;
display: flex;
flex-direction:row;
flex-wrap: wrap;
border:5px solid black;
overflow:visible;
}
.emoticon{
font-size:3rem;
max-width:49px;
border:1px solid red;
cursor:pointer;
}
#console{
position:absolute;
bottom:1px;
font-size:22px;
}
</style>
<script src="/js_webseite/jquery.js"></script>
<body>
<table>
<tr>
<td>
<i class="emoticonistda">????</i>
</td>
<td>
<input class="background_box" type="text" name="content" maxlength="999" id="content" autocomplete="off" value="das ist ein Test Satz dmit man testen kann ob der Smilie da eingestzt weird wo ich ihn auch losgelassen habe">
</td>
</tr>
</table>
<div id="smile_content">
<div titel='Unicode emoji ????' class='emoticon closesmilies'>
<span draggable="true" title="test" data-code="#x1F600" class='chat_emoticon'>????</span>
</div>
<div titel='Unicode emoji ????' class='emoticon closesmilies'>
<span draggable="true" onclick='emoticons(this.innerHTML)' class='chat_emoticon'>????</span>
</div>
<div titel='Unicode emoji ????' class='emoticon closesmilies'>
<span draggable="true" onclick='emoticons(this.innerHTML)' class='chat_emoticon'>????</span>
</div>
<div titel='Unicode emoji ????' class='emoticon closesmilies'>
<span draggable="true" onclick='emoticons(this.innerHTML)' class='chat_emoticon'>????</span>
</div>
<div titel='Unicode emoji ????' class='emoticon closesmilies'>
<span draggable="true" onclick='emoticons(this.innerHTML)' class='chat_emoticon'>????</span>
</div>
<div titel='Unicode emoji ????' class='emoticon closesmilies'>
<span draggable="true" onclick='emoticons(this.innerHTML)' class='chat_emoticon'>????</span>
</div>
<div titel='Unicode emoji ????' class='emoticon closesmilies'>
<span draggable="true" onclick='emoticons(this.innerHTML)' class='chat_emoticon'>????</span>
</div>
<div titel='Unicode emoji ????' class='emoticon closesmilies'>
<span draggable="true" onclick='emoticons(this.innerHTML)' class='chat_emoticon'>????</span>
</div>
<div titel='Unicode emoji ????' class='emoticon closesmilies'>
<span draggable="true" onclick='emoticons(this.innerHTML)' class='chat_emoticon'>????</span>
</div>
<div titel='Unicode emoji ????' class='emoticon closesmilies'>
<span draggable="true" onclick='emoticons(this.innerHTML)' class='chat_emoticon'>????</span>
</div>
<div titel='Unicode emoji ????' class='emoticon closesmilies'>
<span draggable="true" onclick='emoticons(this.innerHTML)' class='chat_emoticon'>????</span>
</div>
<div titel='Unicode emoji ????' class='emoticon closesmilies'>
<span draggable="true" onclick='emoticons(this.innerHTML)' class='chat_emoticon'>????</span>
</div>
<div titel='Unicode emoji ????' class='emoticon closesmilies'>
<span draggable="true" onclick='emoticons(this.innerHTML)' class='chat_emoticon'>????</span>
</div>
<div titel='Unicode emoji ????' class='emoticon closesmilies'>
<span draggable="true" onclick='emoticons(this.innerHTML)' class='chat_emoticon'>????</span>
</div>
</div>
<div titel='Unicode emoji ????' class='emoticon closesmilies'>
<span onclick='emoticons(this.innerHTML)' class='chat_emoticon'>????</span>
</div>
<div id='console'></div>
<script>
document.addEventListener('dragstart', function (event) {
//alert($(this).attr( 'data-code' ));
event.dataTransfer.setData('text', event.target.innerHTML);
});
document.addEventListener('dragend', function (event) {
inp=document.getElementById('content');
console.log(inp.value+' <br>'+inp.outerHTML);
});
/*
function to(codePoint) {
var TEN_BITS = parseInt('1111111111', 2);
function u(codeUnit) {
return '\\u'+codeUnit.toString(16).toUpperCase();
}
if (codePoint <= 0xFFFF) {
return u(codePoint);
}
codePoint -= 0x10000;
// Shift right to get to most significant 10 bits
var leadSurrogate = 0xD800 + (codePoint >> 10);
// Mask to get least significant 10 bits
var tailSurrogate = 0xDC00 + (codePoint & TEN_BITS);
return u(leadSurrogate) + u(tailSurrogate);
}
var go='????';
var pos = getCaretPos(document.getElementById('content')); // pure JS
var pos = getCaretPos($('#myId')[0], 10); // jQuery
function getCaretPos(domElem) {
var pos;
if (document.selection) {
domElem.focus();
var sel = document.selection.createRange();
sel.moveStart('character', - domElem.value.length);
pos = sel.text.length;
}
else if (domElem.selectionStart || domElem.selectionStart == '0') {
pos = domElem.selectionStart;
}
console.log('Pos '+pos);
}
*/
var console = function() {
return({
log: function(msg) {
consoleDiv = document.getElementById('console');
para = document.createElement('p');
text = document.createTextNode(msg);
para.appendChild(text);
consoleDiv.appendChild(para);
}
});
}();
</script>
</body>
</html>