我正在尝试使用 jsPlumb在测验中将问题与答案联系起来。我有大部分工作期望我希望能够单击一个问题,然后单击一个答案,而不是从一个端点拖到另一个端点。这是因为在触摸设备上拖动是乏味的。这可能吗?
Here is my jsbin with the dragging working
这是我正在使用的 jquery。
$(document).ready(function () {
var targetOption = {
anchor: "LeftMiddle",
isSource: false,
isTarget: true,
reattach: true,
endpoint: "Rectangle",
connector: "Straight",
connectorStyle: { strokeStyle: "#ccc", lineWidth: 5 },
paintStyle: { width: 20, height: 20, fillStyle: "#ccc" },
setDragAllowedWhenFull: true
}
var sourceOption = {
tolerance: "touch",
anchor: "RightMiddle",
maxConnections: 1,
isSource: true,
isTarget: false,
reattach: true,
endpoint: "Rectangle",
connector: "Straight",
connectorStyle: { strokeStyle: "#ccc", lineWidth: 5 },
paintStyle: { width: 20, height: 20, fillStyle: "#ccc" },
setDragAllowedWhenFull: true
}
jsPlumb.importDefaults({
ConnectionsDetachable: true,
ReattachConnections: true
});
jsPlumb.addEndpoint('match1', sourceOption);
jsPlumb.addEndpoint('match2', sourceOption);
jsPlumb.addEndpoint('match3', sourceOption);
jsPlumb.addEndpoint('match4', sourceOption);
jsPlumb.addEndpoint('answer1', targetOption);
jsPlumb.addEndpoint('answer2', targetOption);
jsPlumb.addEndpoint('answer3', targetOption);
jsPlumb.addEndpoint('answer4', targetOption);
jsPlumb.draggable('match1');
jsPlumb.draggable('answer1');
});
最佳答案
我认为如果你不需要 draggable,那么你不应该使用它,并使用正常的 click=connect 方法。
这是一个例子:
基本上我做了什么:
//current question clicked on
var questionSelected = null;
var questionEndpoint = null;
//remember the question you clicked on
$("ul.linematchitem > li").click( function () {
//remove endpoint if there is one
if( questionSelected !== null )
{
jsPlumb.removeAllEndpoints(questionSelected);
}
//add new endpoint
questionSelected = $(this)[0];
questionEndpoint = jsPlumb.addEndpoint(questionSelected, sourceOption);
});
//now click on an answer to link it with previously selected question
$("ul.linematchplace > li").click( function () {
//we must have previously selected question
//for this to work
if( questionSelected !== null )
{
//create endpoint
var answer = jsPlumb.addEndpoint($(this)[0], targetOption);
//link it
jsPlumb.connect({ source: questionEndpoint, target: answer });
//cleanup
questionSelected = null;
questionEndpoint = null;
}
});
当您单击问题列表元素时 - 它会添加端点,当您单击答案元素时 - 它还会添加端点并将其与先前选择的问题连接起来。
我相信这就是您想要做的?
附言作为旁注,为了让这对用户来说更直观,首先让问题的端点可见,这样用户就会知道要做什么——点击。选择问题后,可用的答案端点会弹出提示用户应该点击下一步的位置。
关于javascript - jsPlumb 使用点击而不是拖动来连接元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15441794/