Jquery 使Primefaces在某些条件下可拖动和不可拖动事件

我使用primefaces p:schedule组件来显示事件，如图所示 .

如果我们设置属性draggable=“true”并 使用事件“eventMove”

我有两种类型的事件，我可以用它们的 “头衔”

我希望type1事件是可拖动的，而Type2事件不是可拖动的

我怎样才能做到呢？正如我们提供的语法一样，我们可以通过这种方式将事件变为可拖动事件

<p:schedule value="#{scheduleController.eventModel}" widgetVar="myschedule" draggable="true">  

        <p:ajax event="dateSelect" listener="#{scheduleController.onDateSelect}" update="eventDetails" oncomplete="eventDialog.show()" />  
        <p:ajax event="eventSelect" listener="#{scheduleController.onEventSelect}" update="eventDetails" oncomplete="eventDialog.show()" />  
        <p:ajax event="eventMove" listener="#{scheduleController.onEventMove}" update="messages" />  


    </p:schedule>

---

您必须深入到fullcalendar插件中才能实现它。检查以下问题：

如果您可以在JSF服务器发出响应之前对其进行编辑，那么可以尝试使用过滤器

启用“可拖动”时，事件具有此一般结构：

请注意主div的类：

<div style="position: absolute; z-index: 8; top: 83px; left: 359px; width: 133.85px; height: 166px;" class="fc-event fc-event-skin fc-event-vert fc-event-draggable fc-corner-top fc-corner-bottom ui-draggable ui-resizable">

<div class="fc-event-inner fc-event-skin">
    <div class="fc-event-head fc-event-skin">
        <div class="fc-event-time">19/12 8:00 - 19/12 10:00</div>
    </div>
    <div class="fc-event-content">
        <div class="fc-event-title">Breakfast at Tiffanys</div>
    </div>
    <div class="fc-event-bg"></div>
</div>
<div class="ui-resizable-handle ui-resizable-s">=</div>
</div>
</div>

<!-- COMMENTED IN ORDER TO KEEP SAME CODE BLOCK -->
<!--When draggable is off, you can see the classes: -->

<div style="position: absolute; z-index: 8; top: 83px; left: 359px; width: 133.85px; height: 166px;" class="fc-event fc-event-skin fc-event-vert fc-corner-top fc-corner-bottom ui-resizable">
<div class="fc-event-inner fc-event-skin">
    <div class="fc-event-head fc-event-skin">
        <div class="fc-event-time">19/12 8:00 - 19/12 10:00</div>
    </div>
    <div class="fc-event-content">
        <div class="fc-event-title">Breakfast at Tiffanys</div>
    </div>
        <div class="fc-event-bg"></div>
    </div>
    <div class="ui-resizable-handle ui-resizable-s">=</div>
</div>
</div>

19/12 8:00 - 19/12 10:00
蒂凡尼早餐
=
19/12 8:00 - 19/12 10:00
蒂凡尼早餐
=

然后需要注销所需计划事件的DOM事件，但是

Schedule每次都重新呈现，并重新注册事件和类。由于primefaces将数据转发给jQuery schedule插件，因此您几乎无法控制这些项

因此，您需要在每次事件重新呈现时将其标记为不可拖动

ajax代码上的PF响应是一个javascript对象，其中包含插件重新呈现时间表所需的数据，因此我认为服务器端不会有任何帮助

以下是事件拖动时的服务器响应：

<partial-response>
<changes>
<update id="formNotificacao:j_idt72">{"events" : [{"id": "0df04a40-3477-4564-ae2c-340509acd09e","title": "Champions League Match","start": 1355781614894,"end": 1355792414894,"allDay":false,"editable":true},{"id": "3d1e23ec-3a85-488b-aea4-00fa5f2205da","title": "Birthday Party","start": 1355748300000,"end": 1355766300000,"allDay":false,"editable":true},{"id": "35dec60d-0e7a-431d-aef4-b077616908ab","title": "Breakfast at Tiffanys","start": 1355919300000,"end": 1355926500000,"allDay":false,"editable":true},{"id": "4b6c8d2c-bcf1-444c-a92f-d5a0b60499a1","title": "Plant the new garden stuff","start": 1356022814910,"end": 1356195614910,"allDay":false,"editable":true}]}</update>
<update id="javax.faces.ViewState">-8755441948733966113:8810728330896833649</update>
</changes>
</partial-response>

{“事件”：[{“id”：“0df04a40-3477-4564-ae2c-34059ACD09E”，“标题”：“冠军联赛比赛”，“开始”：1355781614894，“结束”：1355792414894，“全天”：假，“可编辑”：真}，{“id”：“3d1e23ec-3a85-488b-aea4-00fa5f2205da”，“标题”：“生日聚会”，“开始”：1355748300000，“结束”：1355766300000，“全天”：假，“可编辑”：真}，{“id”：“35dec60d-0e7a-431d-aef4-b077616908ab”，“标题”：“蒂凡尼早餐”，“开始”：1355919300000，“结束”：1355926500000，“全天”：假，“可编辑”：真}，{“id”：“4b6c8d2c-bcf1-444c-a92f-d5a0b60499a1”，“标题”：“种植新的花园材料”，“开始”：135602281490，“结束”：1356195614910，“全天”：假，“可编辑”：真}”
-8755441948733966113:8810728330896833649

我认为您必须使用一些javascript来注销所需元素中的事件。但是，由于这些事件从服务器加载时只包含数据，因此您必须通过名称、日期或其他方式来识别它们

有关如何注销事件的信息，请参见此问题：

因此，路径是：

• 在JSF页面上放置一些javascript，以注销所选计划项目的事件
• 将有关如何识别将被取消拖动的计划iTen的信息传递到javascript中
• 找出正在侦听拖动事件的元素
• 超越拖动事件，使其无法工作，同时不会干扰其他计划的ITEN

---

作为额外的奖励，我测试的源代码如下：

您必须将

的draggable属性绑定到托管bean布尔属性，然后使用控件（在下面的示例中，使用selectbooleancheckbox:

<p:schedule value="#{scheduleController.eventModel}" draggable="#{scheduleController.draggable}" (...) />

请注意与服务器通信的ajax标记：

<p:selectBooleanCheckbox value="#{scheduleController.draggable}">
<p:ajax update=":formNotificacao:toggleDraggableSchedule"/>
</p:selectBooleanCheckbox>

整个JSF代码：

                <h:form id="formNotificacao">

                    <p:growl id="messages" showDetail="true" />
<h:panelGroup id="toggleDraggableSchedule">
                    <p:schedule value="#{scheduleController.eventModel}" draggable="#{scheduleController.draggable}"
                        widgetVar="myschedule" view="agendaWeek" allDaySlot="false"
                        slotMinutes="15" firstHour="7" showWeekends="FALSE"
                        leftHeaderTemplate="prev,next" rightHeaderTemplate=""
                        minTime="7am" maxTime="21pm"
                        timeFormat="dd/MM H:mm{ - dd/MM H:mm}" axisFormat="HH"
                        timeZone="#{rotulo.timeZone}">

                        <p:ajax event="dateSelect"
                            listener="#{scheduleController.onDateSelect}"
                            update="formNotificacao" oncomplete="eventDialog.show()" />
                        <p:ajax event="eventSelect"
                            listener="#{scheduleController.onEventSelect}"
                            update="formNotificacao" oncomplete="eventDialog.show()" />
                        <p:ajax event="eventMove"
                            listener="#{scheduleController.onEventMove}" update="formNotificacao" />
                        <p:ajax event="eventResize"
                            listener="#{scheduleController.onEventResize}" update="formNotificacao" />

                    </p:schedule>
</h:panelGroup>
                    <p:dialog widgetVar="eventDialog" header="Event Details"
                        showEffect="clip" hideEffect="clip">
                        <h:panelGrid id="eventDetails" columns="2">
                            <h:outputLabel for="title" value="Title:" />
                            <p:inputText id="title"
                                value="#{scheduleController.event.title}" required="true" />

                            <h:outputLabel for="from" value="From:" />
                            <p:calendar value="#{scheduleController.event.startDate}" pattern="MM/dd/yyyy HH:mm"  stepMinute="15" />

                            <h:outputLabel for="to" value="To:" />
                            <p:calendar value="#{scheduleController.event.endDate}" pattern="MM/dd/yyyy HH:mm"  stepMinute="15" />

                            <h:outputLabel for="allDay" value="All Day:" />
                            <h:selectBooleanCheckbox id="allDay"
                                value="#{scheduleController.event.allDay}" />

                            <p:commandButton type="reset" value="Reset" />
                            <p:commandButton value="Save"
                                actionListener="#{scheduleController.addEvent}"
                                oncomplete="myschedule.update();eventDialog.hide();" />
                        </h:panelGrid>
                    </p:dialog>

<p:selectBooleanCheckbox value="#{scheduleController.draggable}">
<p:ajax update=":formNotificacao:toggleDraggableSchedule"/>
</p:selectBooleanCheckbox>

                </h:form>

托管bean：

import java.text.DateFormat;
import java.util.Calendar;
import java.util.Date;
import java.util.List;
import java.util.TimeZone;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;

import org.primefaces.event.DateSelectEvent;
import org.primefaces.event.ScheduleEntryMoveEvent;
import org.primefaces.event.ScheduleEntryResizeEvent;
import org.primefaces.event.ScheduleEntrySelectEvent;
import org.primefaces.model.DefaultScheduleEvent;
import org.primefaces.model.DefaultScheduleModel;
import org.primefaces.model.ScheduleEvent;
import org.primefaces.model.ScheduleModel;

@ManagedBean
@ViewScoped
public class ScheduleController {

private ScheduleModel eventModel;

private ScheduleEvent event = new DefaultScheduleEvent();

private List<ScheduleEvent> eventos;

private String theme;

private boolean draggable;

public ScheduleController() {

    eventModel = new DefaultScheduleModel();
    eventModel.addEvent(new DefaultScheduleEvent("Champions League Match",
            previousDay8Pm(), previousDay11Pm()));
    eventModel.addEvent(new DefaultScheduleEvent("Birthday Party",
            today1Pm(), today6Pm()));
    eventModel.addEvent(new DefaultScheduleEvent("Breakfast at Tiffanys",
            nextDay9Am(), nextDay11Am()));
    eventModel.addEvent(new DefaultScheduleEvent(
            "Plant the new garden stuff", theDayAfter3Pm(),
            fourDaysLater3pm()));
    setEventos(eventModel.getEvents());

}

private Date fourDaysLater3pm() {
    return getDate(4, 15);
}

private Date theDayAfter3Pm() {
    return getDate(2, 15);
}

private Date nextDay11Am() {
    return getDate(1, 11);
}

private Date nextDay9Am() {
    return getDate(+1, 9);
}

private Date today6Pm() {
    return getDate(0, 18);
}

private Date today1Pm() {
    return getDate(0, 13);
}

private Date previousDay11Pm() {
    return getDate(-1, 23);
}

private Date previousDay8Pm() {
    return getDate(-1, 20);
}

private Date getDate(int deltaDay, int hour) {
    Calendar cal = Calendar.getInstance();

    cal.setTime(new Date());
    cal.set(Calendar.HOUR_OF_DAY, hour);
    cal.set(Calendar.DAY_OF_MONTH, cal.get(Calendar.DAY_OF_MONTH)
            + deltaDay);
    return cal.getTime();
}

public void addEvent(ActionEvent actionEvent) {
    if (event.getId() == null)
        eventModel.addEvent(event);
    else
        eventModel.updateEvent(event);

    event = new DefaultScheduleEvent();
}

public void onEventSelect(ScheduleEntrySelectEvent selectEvent) {
    event = selectEvent.getScheduleEvent();
}

public void onDateSelect(DateSelectEvent selectEvent) {
    event = new DefaultScheduleEvent(Math.random() + "",
            selectEvent.getDate(), selectEvent.getDate());
}

public void onEventMove(ScheduleEntryMoveEvent event) {
    snapToFifteen((DefaultScheduleEvent) event.getScheduleEvent());
    FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO,
            "Event moved", "Day delta:" + event.getDayDelta()
                    + ", Minute delta:" + event.getMinuteDelta());
    addMessage(message);
}

public void onEventResize(ScheduleEntryResizeEvent event) {
    snapToFifteen((DefaultScheduleEvent) event.getScheduleEvent());
    FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO,
            "Event resized", "Day delta:" + event.getDayDelta()
                    + ", Minute delta:" + event.getMinuteDelta());
    addMessage(message);
}

private void snapToFifteen(DefaultScheduleEvent ev) {
    DateFormat sdf = DateFormat.getDateTimeInstance(DateFormat.FULL,
            DateFormat.FULL);
    sdf.setTimeZone(TimeZone.getTimeZone("GMT-3"));
    System.out.println("CALLING SNAP ON event: Start = "
            + sdf.format(ev.getStartDate()) + " End = "
            + sdf.format(ev.getEndDate()));
    Date inicio = fifteenize(ev.getStartDate());
    Date fim = fifteenize(ev.getEndDate());
    ev.setStartDate(inicio);
    ev.setEndDate(fim);
    System.out.println("Snapped: Start = " + sdf.format(ev.getStartDate())
            + " End = " + sdf.format(ev.getEndDate()));
}

private Date fifteenize(Date data) {
    Calendar cal = Calendar.getInstance();
    cal.setTime(data);
    int minutos = cal.get(Calendar.MINUTE);
    int modQuinze = (minutos + 7) / 15;

    cal.set(Calendar.MINUTE, modQuinze * 15);
    cal.set(Calendar.HOUR, cal.get(Calendar.HOUR));
    cal.set(Calendar.SECOND, 0);
    cal.set(Calendar.MILLISECOND, 0);
    return cal.getTime();
}

private void addMessage(FacesMessage message) {
    FacesContext.getCurrentInstance().addMessage(null, message);
}

public ScheduleModel getEventModel() {
    return eventModel;
}

public void setEventModel(ScheduleModel eventModel) {
    this.eventModel = eventModel;
}

public ScheduleEvent getEvent() {
    return event;
}

public void setEvent(ScheduleEvent event) {
    this.event = event;
}

public String getTheme() {
    return theme;
}

public void setTheme(String theme) {
    this.theme = theme;
}

public void setEventos(List<ScheduleEvent> eventos) {
    this.eventos = eventos;
}

public List<ScheduleEvent> getEventos() {
    return eventos;
}

public void setDraggable(boolean draggable) {
    this.draggable = draggable;
}

public boolean isDraggable() {
    return draggable;
}

}

导入java.text.DateFormat；
导入java.util.Calendar；
导入java.util.Date；
导入java.util.List；
导入java.util.TimeZone；
导入javax.faces.application.FacesMessage；
导入javax.faces.bean.ManagedBean；
导入javax.faces.bean.ViewScoped；
导入javax.faces.context.FacesContext；
导入javax.faces.event.ActionEvent；
导入org.primefaces.event.DateSelectEvent；
导入org.primefaces.event.ScheduleEntryMoveEvent；
导入org.primefaces.event.ScheduleEntryResizeEvent；
导入org.primefaces.event.ScheduleEntrySelectEvent；
导入org.primefaces.model.DefaultScheduleEvent；
导入org.primefaces.model.DefaultScheduleModel；
导入org.primefaces.model.ScheduleEvent；
导入org.primefaces.model.ScheduleModel；
@ManagedBean
@视域
公共类调度控制器{
私有调度模型事件模型；
private ScheduleEvent事件=新的DefaultScheduleEvent（）；
私人列表事件；
私有字符串主题；
私有布尔可拖动；
公共调度控制器（）{
eventModel=新的DefaultScheduleModel（）；
eventModel.addEvent（新的DefaultScheduleEvent（“冠军联赛比赛”），
previousDay8Pm（），previousDay11Pm（））；
eventModel.addEvent（新的DefaultScheduleEvent（“生日聚会”），
今天下午1点，今天下午6点；
eventModel.addEvent（新的DefaultScheduleEvent（“Tiffanys早餐”），
下一天上午9点（），下一天上午11点（））；
eventModel.addEvent（新的DefaultScheduleEvent(
“种植新的花园植物”，第二天下午3点后（），
四天时间（下午3点（））；
setEventos（eventModel.getEvents（））；
}
私人日期下午四点{
返回日期（4,15）；
}
私人日期下午3点以后（）{
返回日期（2,15）；
}
私人日期下周一上午11点（）{
返回日期（1,11）；
}
私人日期下周一上午9点（）{
返回getDate（+1,9）；
}
非公开日期：今天下午6点{
返回getDate（0,18）；
}
私人日期：今天下午1点{
public class MyScheduleEvent extends DefaultScheduleEvent {
    public MyScheduleEvent(MyEntity myEntity) {
        super(....)
        this.setEditable(myEntity.isEditable());
    }
}