события перетаскивания в JQuery UI

Question

я изучаю JQuery перемещаемой и сбрасываемой UI в этом я столкнулся проблемой обработки событий,

здесь является мой код

CSS:

#draggable 
{ 
    width: 100px; 
    height: 100px; 
    background: blue; 
} 
#droppable 
{ 
    position: absolute; 
    left: 250px; 
    top: 0; 
    width: 125px; 
    height: 125px; 
    background: red; 
    color: #fff; 
    padding: 10px; 

} 

HTML:

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
<script type="text/javascript" src="jquery-ui.min.js"></script> 

<div id="droppable">Drop here 
<label id="l1"></label> 
</div> 
<div id="draggable"><input type="text" style="width: 90px;" id="t1"></div> 

JavaScript:

var text; 
$("#draggable").draggable({ 
    revert: true , 

    stop: function(){ 
     alert("over"); 

     document.getElementById('t1').value = ""; 
    } 

}); 
$("#droppable").droppable({ 
    drop: function() { 
    alert("dropped"); 
    text = document.getElementById('t1').value; 
    console.log(text); 
    document.getElementById('l1').innerHTML = text; 
} 
}); 

Здесь, когда draggable div падает, я хочу установить текст, который находится в текстовом поле перетаскиваемого на ярлык, который находится в droppable div, но некоторые как текст не установлен.

Так что, пожалуйста, помогите мне в этом, я знаю, что я совершил глупую ошибку в этом, но я могу его найти.

Большое вам спасибо за ваше время.

Answer 1

Я не уверен, правильно понял, что вы просили, но я бы хотел, чтобы это помогло.

Вы можете использовать jQuery всюду, если хотите.

element.val("");, чтобы установить текст элемента.

text = draggableText.val();, чтобы получить текст элемента.

droppableText.text(text);, чтобы установить текст ярлыка.

jsFiddle: https://jsfiddle.net/5mrz37wn/

CSS:

#draggable { 
    width: 100px; 
    height: 100px; 
    background: blue; 
} 

#droppable { 
    position: absolute; 
    left: 250px; 
    top: 0; 
    width: 125px; 
    height: 125px; 
    background: red; 
    color: #fff; 
    padding: 10px; 
} 

HTML:

<div id="droppable">Drop here 
    <label id="l1"></label> 
</div> 
<div id="draggable"> 
    <input id="t1" type="text" style="width: 90px;"> 
</div> 

JavaScript:

var text; 
var draggableText = $("#t1"); 
var droppableText = $("#l1"); 

$("#draggable").draggable({ 
    revert: true, 
    stop: function() { 
    alert("over"); 
    draggableText.val(""); 
    } 

}); 
$("#droppable").droppable({ 
    drop: function() { 
    alert("dropped"); 
    text = draggableText.val(); 
    console.log(text); 
    droppableText.text(text); 
    } 
}); 

Некоторые ссылки на ваш jQuery Исследование:

http://api.jquery.com/val/

http://api.jquery.com/text/

Вы всегда можете обратиться к этим документам, чтобы узнать больше о доступных методах.

Answer 2

$(function() { 
 
    $("#draggable").draggable(); 
 
    });

#draggable { width: 150px; height: 150px; padding: 0.5em;cursor:move; } 
 

 

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 

 

 
    
 
<div id="draggable" class="ui-widget-content"> 
 
    <p>Drag me around</p> 
 
</div>

Подробнее: https://jqueryui.com/draggable/

Answer 3

Попробуйте это. Вы можете сделать это только с помощью javascript.

window.allowDrop = function(ev) { 
 
    ev.preventDefault(); 
 
    if (ev.target.getAttribute("draggable") == "true") 
 
     ev.dataTransfer.dropEffect = "none"; // dropping is not allowed 
 
    else 
 
     ev.dataTransfer.dropEffect = "all"; // drop it like it's hot 
 
}; 
 

 
window.drag = function(ev) { 
 
    ev.dataTransfer.setData("id", ev.target.id); 
 
}; 
 

 
window.drop = function(ev) { 
 
    ev.preventDefault(); 
 
    var id = ev.dataTransfer.getData("id"); 
 

 
    var dragged = document.getElementById(id); 
 
    //dragged 
 
    ev.target.appendChild(dragged); 
 
    c = dragged.childNodes; 
 
    document.getElementById("l1").innerHTML = c[0].value; 
 
};

#draggable 
 
{ 
 
    width: 100px; 
 
    height: 100px; 
 
    background: blue; 
 
} 
 
#droppable 
 
{ 
 
    position: absolute; 
 
    left: 250px; 
 
    top: 0; 
 
    width: 125px; 
 
    height: 125px; 
 
    background: red; 
 
    color: #fff; 
 
    padding: 10px; 
 

 
}

<div id="droppable" ondrop="drop(event)" ondragover="allowDrop(event)">Drop here 
 
<label id="l1"></label> 
 
</div> 
 
<div id="draggable" draggable="true" ondragstart="drag(event)"><input type="text" style="width: 90px;" id="t1"></div>

Answer 4

Этот пример может поможет вам:

function dragStart(event) { 
 
    event.dataTransfer.setData("Text", event.target.id); 
 
} 
 

 
function allowDrop(event) { 
 
    event.preventDefault(); 
 
} 
 

 
function drop(event) { 
 
    event.preventDefault(); 
 
    var data = event.dataTransfer.getData("Text"); 
 
    event.target.appendChild(document.getElementById(data)); 
 
}

.droptarget { 
 
    float: left; 
 
    width: 100px; 
 
    height: 35px; 
 
    margin: 15px; 
 
    padding: 10px; 
 
    border: 1px solid #aaaaaa; 
 
}

<p>Drag and Drop Jquery example</p> 
 

 
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"> 
 
    <p ondragstart="dragStart(event)" draggable="true" id="dragtarget">Drag me!</p> 
 
</div> 
 
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
 
<p id="example"></p>