Hi,
I need to be able to drag items from jqxListBox into an “contentEditable”.
When I try the code below, events somehow stop working after the first mouse click on a list item.
Can you please tell me what I am doing wrong, and what is the proper way of doing it ?
From $(document).ready(function ():
$("#jqxDockPanel").jqxDockPanel({ width: 900, height: 700, theme: theme });
$(“#jqxMenu”).jqxMenu({ width: ‘900’, height: ’30px’, theme: theme });
$(“#jqxMenu”).css(‘visibility’, ‘visible’);
var source = [
{html: “<p class=’drag’>Sentence One</p>” },
{html: “<p class=’drag’>Sentence Two</p>” }
];
$(“#jqxListBox”).jqxListBox({ source: source, width: 300, height: 650, theme: theme });
$(“#jqxListBox”).css(‘border’, ‘none’);
$(‘.drag’).jqxDragDrop({ dropTarget: $(‘#editor’), revert: true });
$(‘.drag’).bind(‘mouseenter’, function (event) {
$(‘#editor’).append(“<br>mouseenter”);
});
$(‘.drag’).bind(‘mouseleave’, function (event) {
$(‘#editor’).append(“<br>mouseleave”);
});
$(‘.drag’).bind(‘dragStart’, function (event) {
$(‘#editor’).append(“<br>dragStart”);
});
$(‘.drag’).bind(‘dragEnd’, function (event) {
$(‘#editor’).append(“<br>dragEnd”);
});
$(‘.drag’).bind(‘dropTargetEnter’, function (event) {
$(‘#editor’).append(“<br>dropTargetEnter”);
});
$(‘.drag’).bind(‘dropTargetLeave’, function (event) {
$(‘#editor’).append(“<br>dropTargetLeave”);
});
Relevant HTML:
<div id='top' dock='top' style='width: 100px; height: 50px;'