title: drag and drop event in fullcalendar
body: <p><strong>Currently i am having problem with drag and drop event in fullcalendar: i don't know how to handle it!</strong></p>
  <p><strong>Description the problem:</strong></p>
  <ul>
  <li>I want only the blue line to be dragged and dropped, and the remaining lines are not dragged (because the blue part is the admin's part to confirm the division of work, and the rest is for the user):
  <a href="https://i.stack.imgur.com/tzqIZ.png" rel="nofollow noreferrer">my calendar</a></li>
  <li>after drag and drop it will look like this:</li>
  </ul>
  <blockquote>
  <p>Before <a href="https://i.stack.imgur.com/E8cVs.png" rel="nofollow noreferrer">before</a></p>
  </blockquote>
  <blockquote>
  <p>Expected: <a href="https://i.stack.imgur.com/lNjmV.png" rel="nofollow noreferrer">after</a></p>
  </blockquote>
  <ul>
  <li>I want after onclick column will start dragging the blue line from the click position</li>
  </ul>
  <p><strong>Here is my code:</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var calendarEl = document.getElementById("calendar");
      var events = [];
  
      let calendar = new Calendar(calendarEl, {
          plugins: [interactionPlugin, resourceTimelinePlugin],
          initialView: "resourceTimelineDay",
          headerToolbar: {
              left: "",
              center: "title",
              right: "prev,next today",
          },
          height: "auto",
          locale: "ja",
          editable: true,
          resourceAreaColumns: [{
                  field: 'title',
                  headerContent: 'スタッフ'
              },
              {
                  field: 'count',
                  headerContent: '出勤回数'
              }
          ],
          resourceAreaWidth: "190px",
          views: {
              resourceTimelineDay: {
                  slotDuration: "00:15:00",
                  slotMinWidth: "10",
              },
          },
          eventDidMount: function(view, element) {
              var currentdate = view.intervalStart;
              $('.datetime-picker').datepicker().datepicker('setDate', new Date(currentdate));
          },
          resources: [{
                  id: "1",
                  title: "佐藤",
                  count: "10",
                  eventColor: "#b6d7a8"
              },
              {
                  id: "2",
                  title: "山田",
                  count: "12",
                  eventColor: "#ffe5e5"
              },
              {
                  id: "3",
                  title: "田中",
                  count: "3",
                  eventColor: "#bbd6ee"
              },
              {
                  id: "4",
                  title: "鈴木",
                  count: "5",
                  eventColor: "#e7e6e6"
              },
          ],
          // リソースごとのイベントを定義
          events: [{
                  resourceId: "1",
                  title: "",
                  start: "2022-08-10T09:00:00",
                  end: "2022-08-10T15:00:00",
              },
              {
                  resourceId: "2",
                  title: "",
                  start: "2022-08-10T00:00:00",
                  end: "2022-08-10T24:00:00",
              },
              {
                  resourceId: "3",
                  title: "",
                  start: "2022-08-10T00:00:00",
                  end: "2022-08-10T24:00:00",
              },
              {
                  resourceId: "4",
                  title: "",
                  start: "2022-08-10T00:00:00",
                  end: "2022-08-10T24:00:00",
              },
          ],
      });
      calendar.render();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="calendar" class="w-full"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><strong>Thanks all !</strong></p>