我实际上在另一个帖子中问了这个问题，但是我无法正确提供问题的小提琴示例。现在我设法创建了问题的小提琴示例。请按照将图像拖放到右侧窗格的顺序 - ＆gt;双击丢弃的图像（然后另一个图像将出现在我没有正确包含src的地方。但这没关系） - ＆gt;再次点击出现的图像 - ？然后会出现动态html。问题是，当我尝试左键单击选择框时，它不会显示结果列表。但是当你右键单击它然后左键单击它时，它就会出现。请告诉我原因。我试过但我找不到它。
我将在下面包含部分代码，但完整代码将在小提琴上。
$(document).ready(function () {
var x = null;
//Make element draggable
$(".drag").draggable({
helper: 'clone',
cursor: 'move',
tolerance: 'fit',
stop: function (ev, ui) {
var pos = $(ui.helper).offset();
var dragItem = $(this).attr('id');
objName = "#" + dragItem + count;
$(objName).removeClass("drag");
$(objName).draggable({
cancel: ".arrows"
});
//Fires when an existing object is dragged
$(objName).draggable({
containment: '#droppable',
drag: function (ev, ui) {
// instance.repaint($(this));
var x = ui.offset.left;
var y = ui.offset.top;
$("#xax").val(x);
$("#yax").val(y);
},
stop: function (ev, ui) {
var x = ui.offset.left;
var y = ui.offset.top;
jsonElements.forEach(function (element) {
if (element.cloneID == currDragId) {
element.left = x;
element.top = y;
//appendNewArrowPositions(x,y,currDragId);
}
});
}
});
},
revert: true
});
$("#droppable").droppable({
accept: '.drag',
activeClass: "drop-area",
drop: function (e, ui) {
if ($(ui.draggable)[0].id != "") {
count++;
var dragItem = $(ui.draggable)[0].id;
x = ui.helper.clone();
$(this).append(x.attr("id", dragItem + count));
ui.helper.remove();
var clone = ui.draggable;
var width = clone.width();
var height = clone.height();
var parent = $('.droppable.ui-droppable');
//substract the additional amount created by relativeness
var leftAd = (x.position().left - parent.offset().left);
x.css({
left: leftAd
});
var offsetXPos = ui.offset.left;
var offsetYPos = ui.offset.top;
var obj = {};
obj["cloneID"] = dragItem + count;
obj["width"] = 85;
obj["height"] = 85;
obj["top"] = offsetYPos;
obj["left"] = offsetXPos;
if (dragItem == "input") {
obj["streamAlies"] = "";
obj["selectedDefinedStream"];
obj["asignedAttributeList"];
obj["itemType"] = "input";
}
var str = eval(obj);
jsonElements.push(str);
//to append the delete button only to the clone
$('img[id="arrow"]').append($(x.find('img[id="arrow"]')).attr("id", 'cloneImage' + count));
x.resizable({
maxHeight: $('#droppable').height(),
maxWidth: $('#droppable').width()
});
x.addClass('remove');
var el = $('<span><a href="Javascript:void(0)" class=\"xicon delete' + count + '\" id=\"delete' + count + '\" title=\"Remove\">X</a></span>');
$(el).insertAfter($('img[id="cloneImage' + count + '"]'));
$("#" + dragItem + count).dblclick(function (event) {
event.stopPropagation();
var cloneAttrID = $(this).attr('id');
var config = $('<span id=\"configconfigImg' + count + '\" class=\"config\"> <img id=\"configImg' + count + '\" class=\"configs configClone' + cloneAttrID + '\" src=\"images/configSymbol.png\"></span>');
$("#" + cloneAttrID).append(config);
$('.configClone' + cloneAttrID).on('click', function (event) {
event.stopPropagation();
var attrId = $(this).attr('id');
var parentCloneId = $(this).parent().parent().attr("id");
if ($(this).hasClass("selected" + attrId)) {
$(".pop" + attrId).slideFadeToggle(function () {
$("#" + attrId).removeClass("selected" + attrId);
$("#config" + attrId).children(".pop" + attrId).remove();
});
} else {
if (dragItem == "input") {
var selectOptions = "";
for (var z = 0; z < definedStreams.length; z++) {
selectOptions += '<option value="' + definedStreams[z].streamName + '">' + definedStreams[z].streamName + '</option>';
}
jsonElements.forEach(function (element) {
if (element.itemType == "Output") {
selectOptions += '<option value="' + element.streamAlies + '">' + element.streamAlies + '</option>';
}
});
$(this).addClass("selected" + attrId).parent().append('<div id="pop' + attrId + '" class="messagepop pop' + attrId + '"><form id="new_message" action="/messages"><p><label for="definedStream">Please select the stream</label>' +
'<select name="selectedStreamsId' + attrId + '" id="selectedStreamsId' + attrId + '"><option value="-1">--SELECT--</option>' + selectOptions +
'</select></p>' +
'<p></p><input type="button" value="Save" name="saveStream' + attrId + '" id="saveStream' + attrId + '"/></div></form>');
// Stopping propagation of specfic element
//$(".pop"+attrId).add('#selectedStreamsId'+attrId+'').click(handler);
}
}
});
});
x.appendTo('#droppable');
};
}
});
});